React的本质：
React是基于状态驱动的声明式的UI库，用组件构建可预测的用户界面
1. React的第一本质
UI = f(state)
即用户界面是由state来决定的例如：当state改变的时候：setCount(5)则React会自动更新UI:
<h1>5<h1>
则无需手动操作DOM，React直接帮你完成。
问React为什么存在？
为了解决DOM操作复杂的问题，通过state自动更新UI
2. React的第二本质：声明式的编程（Declarative）
React是声明式的，而不是命令式的；命令式的传统JS：
document.getElementById("title").innerText = "Hello"
React声明式：
<h1>{title}</h1>
只需要声明即可，React会自动地更新。
React的核心思想：
React描述UI，而不是操作UI
3. React的第三本质：Component组件
React是一个组件系统组件的本质：
Component = Function
例如：组件可以组合：
function App() { return ( <div> <Button /> <Button /> </div> )}
组件可以让UI：
- 可复用
- 可维护
- 可组合
这是React的核心优势；所以说，React不是在写页面，而是在构建组件系统。
4. React的第四本质：State系统
state是react的核心驱动力
state是UI的数据来源
例如：UI会根据state的改变：
state改变：
setIsLoggedIn(true)
UI会自动更新
React不直接更新UI
state更新 -> React重新渲染 -> UI更新
5. React的第五本质：重新渲染机制（Render）
React核心机制：
state change -> Render -> UI update
流程：
- state改变
- Component重新执行
- React更新UI
例如：点击按钮：React：
重新执行 APP()
重新生成 UI。
React re-render 是什么？
Component function re-executes when state changes.
6. React的第六本质：Virtual DOM
React使用Virtual Dom 来提升性能。传统DOM: 修改慢React: 使用Virtual Dom
Virtual DOM -> diff -> real Dom
React只更新改变的部分，不是全部更新，这是react快的原因。
为什么React 快 ？
- Virtual DOM
- Diff algorithm
- Selective updates
7. React的第七本质：单向数据流（One-way data flow）
数据流：
Parent -> Child
通过Props:
function Parent() {
renturn <Child name="Zane" />
}
function Child(props) {
return <h1>{props.name}</h1>
}
Props是只读的，不可以修改
props.name = 'John' ❎
React是单向数据流架构
8. React第八本质：React是函数驱动系统
React Component 是函数：
function App() {
return <h1>Hello</h1>
}
React 的本质：
Component(state) -> state
React 就是不断执行函数，生成UI
9. React的第九本质：Hooks是状态管理机制
Hook让函数拥有state例如：
useState
useEffect
useContext
Hook的本质：
给function 添加state 和 lifecycle能力
这是 React modern architectureClass Component 基本淘汰
10. React的第十本质：React是UI Library,非Framework
React只负责：
UI rendering
不负责：
routing
state management
API
这些需要：
React
Router
Zustand
Axious
这叫 React ecosystem, React生态
React是UI层的解决方案
11. React真正的工作流程
流程：这是React的本质流程。
12. React本质总结：
一个基于state的函数执行系统，用组件构建UI，并通过Virtual DOM来高效更新界面
或者更工程化：
React is a state-dirven component rendering engine.
13. 必须理解的React核心能力
核心概念：
Component
State
Props
Render
Hooks
Virtual DOM
14. 你应该把React理解为：
不是：
一个JS库
而是：
UI的操作系统
负责：
state -> UI
15. React本质总结为5条：
React is component-based
UI is driven by state
React uses Virtual DOM
React re-renders when state changes
React uses one-way data flow
