React

触类旁通多种框架

关键词：双向绑定 、依赖收集、发布/订阅模式、虚拟DOM、虚拟DOM diff、模板编译。

• 响应式框架基本原理

1. 收集视图依赖了哪些数据 - 依赖收集

2. 模板编译 - 遍历+正则

3. 模板编译过程中读取数据，表示get/set

4. 感知被依赖数据的变化 - 数据劫持/数据代理 - Object.defineProperty/Proxy

5. 数据变化时，通知需要更新的视图，并进行更新 - 发布/订阅模式

• 虚拟DOM：用数据结构表示DOM结构

• 不减少操作DOM的次数，能够精确地获取最小的操作的DOM的集合

• DOM diff - 递归/最小化差异应用

React

• JSX条件渲染

      假设有一个列表页，状态有数据获取中，数据获取出错，数据为空，展示数据四种状态。

      思考：为什么不能直接在JSX中使用if/else

• React diff/React Fiber

• 组件设计

• 单一职责 - HOC

• 组件通信和封装 - 组件的state结构保持在内部

• 组合性 - render props

• 纯组件

• 组件可测试性

• 组件命名

• 数据状态管理

       React state/Redux store - 从数据持久度和数据消费范围分析

• 拓展：Mobx

       Redux提倡函数式/不可变性/数据扁平化，依赖发布订阅模式

       Mobx数据源可变，对数据的观察是响应式的。

• React Hook

• 按业务逻辑拆分代码，而不是按生命周期。

• 只可以在顶层使用

• 性能

• 避免不必要的渲染 - shouldComponentUpdate/PureComponent/memo

• 使用无状态组件