React 本质上是什么

一句话：React 是一个 UI = f(state) 的运行时。

---

核心思想

UI = f(state)

状态变了 → React 自动重新计算 UI → 更新页面

你不用管”怎么更新 DOM”，只管”数据是什么”。

---

对比原生 JS 的思维差异

原生 JS：命令式

你告诉浏览器怎么做

js

// 我要找到这个元素，然后改它的文字
document.getElementById("count").innerText = count + 1

React：声明式

你告诉 React 结果是什么

jsx

// 我的 UI 就是这样，数据变了你自己更新
return <p>{count}</p>

---

React 做了三件事

1. 虚拟 DOM     → 在内存中描述 UI 长什么样
      ↓
2. Diff 算法    → 对比新旧虚拟 DOM，找出最小差异
      ↓
3. 更新真实 DOM → 只改变需要改的部分（性能优化）

---

为什么需要虚拟 DOM？

js

// 直接操作真实 DOM 很慢
document.getElementById("list").innerHTML = newHTML  // 全部重绘

// React 虚拟 DOM：只更新变化的那一个 <li>
// 1000 个列表项，只有 1 个变了，就只改 1 个

---

所以 React 本质上只有两个东西

东西	是什么
组件	函数，吃进 props，吐出 UI
状态	数据变了，函数重新执行，UI 自动更新

jsx

// React 组件就是一个普通函数
function Button({ text }) {       // 吃进 props
  const [on, setOn] = useState(false)  // 状态
  return <button>{text}</button>  // 吐出 UI
}

---

一个比喻

React 就像 Excel 公式

你在 A1 写 =B1 + C1，B1 变了，A1 自动更新。 你不用手动说”去更新 A1”，它自己知道。

React 也一样，状态是数据格，UI 是公式，数据变了 UI 自动重算。

---

理解了这个本质，useState / useEffect / 组件设计 背后的逻辑就都通了。