6.响应式系统与React
设计思路-响应式编程
- 状态更新,UI自动更新
- 前端代码组件化,可复用,可封装
- 状态之间的互相依赖关系,只需声明即可
组件化
- 组件是 组件的结合/原子组件
- 组件内拥有状态,外部不可见
- 父组件可将状态传入组件内部
组件设计
- 组件声明了状态 和 UI 的映射
- 组件有 Props/State 两种状态
- "组件"可由其他组件拼装而成
状态归属问题
状态归属于两个节点向上寻找到最近的祖宗节点
函数是一等公民,可随着组件向下传递
思考
1.React是单向数据流,还是双向数据流?
单向数据流。
2.如何解决状态不合理上升的问题?
3.组件的状态改变后,如何更新DOM?
React Hooks
不要再循环、条件或嵌套函数中使用Hook
React 的实现
Virtual DOM(虚拟DOM)
Virtual DOM 是一种用于和真实 DOM 同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系
How to Diff
完美的最小 Diff 算法,需要 O(n^3)的复杂度
牺牲理论最小Diff,换取时间,得到了O(n)复杂度的算法
不同类型元素 替换
相同类型元素 更新
同类型的组件元素 递归
React 状态管理库
核心思想:将状态抽离到UI外部进行统一管理