响应式系统与React

799 阅读1分钟

6.响应式系统与React

设计思路-响应式编程

  1. 状态更新,UI自动更新
  2. 前端代码组件化,可复用,可封装
  3. 状态之间的互相依赖关系,只需声明即可

组件化

  1. 组件是 组件的结合/原子组件
  2. 组件内拥有状态,外部不可见
  3. 父组件可将状态传入组件内部

组件设计

  1. 组件声明了状态 和 UI 的映射
  2. 组件有 Props/State 两种状态
  3. "组件"可由其他组件拼装而成

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点

函数是一等公民,可随着组件向下传递

思考

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外部进行统一管理