React 的设计思路
UI 编程痛点
1、状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新
2、欠缺基本地代码层面地封装和隔离，代码层面没有组件化
3、UI 之间地数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
响应式与转换式
转换式系统不等于响应式系统
响应式系统：事件————————→执行既定的回调——————————→状态变更
响应式编程
前端 UI：事件————→执行既定的回调————————→状态变更—————————→ UI 更新
1、状态更新，UI 自动更新
2、前端代码组件化，可复用，可封装
3、状态之间的互相依赖关系，只需声明即可
组件化
总结：
1、组件是组件的组合/原子组合
2、组件内部拥有状态，外部不可见
3、父组件可将状态传入组件内部
状态归属问题
思考：
1、React 是单向数据流，还是双向数据流？
2、如何解决状态不合理上升的问题？
3、组件的状态改变后，如何更新 DOM？
组件化
组件设计
1、组件声明了状态和 UI 的映射
2、组件有 Props/State 两种状态
3、“组件”可由其他组件拼装而成
组件代码会是什么样子？
1、组件内部拥有私有状态 State
2、组件接受外部的 Props 状态提供复用性
3、根据当前的 State/Props，返回一个 UI
生命周期
React 的写法
React 的实现
Problem
1、JSX 不符合 JS 语法标准
2、返回的 JSX 发生改变时，如何更新 DOM
3、State/Props 更新时，要重新触发 render 函数
Problem1
Problem2
Virtual DOM（虚拟 DOM）
Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立——对应的关系。
它赋予了 React 声明式的 API：使您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
How to Diff？
完美的最小 Diff 算法，需要 O(n^3) 的复杂度。
牺牲理论最小 Diff，换取时间，得到了 O(n) 复杂度的算法：Heuristic O(n) Algorithm
