React相关

Posted 2021-09-24 echo_numb

为什么用React

React好处：

• 单向数据流：
• 函数式编程：

React好处：

• 提升开发效率，降低维护成本：单向数据流，view = fn(data)。根据输入数据的变化改变界面，数据指向明确，好定位和发现问题，更好的维护。双向绑定数据流混乱
• 成熟完善的社区支持。如Redux：可追踪，可维护。
• 跨平台
• 页面性能：打包策略

Fiber

• 为什么要用Fiber
• Fiber 有什么好处
• 原理

为什么用Fiber，有什么好处

之前的React的节点比对和更新，执行副作用是同步进行的，频繁调用会让浏览器没办法响应用户的键盘等事件，渲染时会有卡顿等现象。React做Fiber是为了能快速响应用户，提升用户体验。

React做的事情是让把同步更新改为两阶段，协调：对比节点，得到新的树，提交：更新。模拟原来的栈调度，支持任务的中断和恢复。可以在中断时执行更高优先级的任务。

Fiber是什么，原理

Fiber是协程的意思，实现了合作式调度，在浏览器空闲的时候执行，时间到了就让出，等待下一次调用。requestIdleCallback。
Fiber也是一个执行单元，对原来的结构进行改造，改造成链表形式，用链表模拟递归调用栈。
Fiber原理

Hooks

• Hooks是什么东西，为什么需要它
• Hooks原理

React 增强了函数组件能力，主要有以下两个方面：

1. 代码管理层面：复杂组件互不关联的逻辑在一起，会变得难以理解。hooks相关的逻辑在一起，逻辑更清晰，增强了函数组件的能力。
2. 代码复用层面：

React提倡的组件复用方式是组合，hooks出现之前组件复用方式是两种：

• HOC 高阶函数：

  优点：增强模式，不会改动原组件，可以抽取共享的业务逻辑。
  缺点： 多层嵌套，上层处理不可见，不能用ref

• render props: function as a child

  优点： 共享状态和行为，因为传染组件，比较灵活
  缺点：多个子组件嵌套地狱，可读性差不好维护

• Hooks
  扁平，没有多层嵌套，更轻便的复用方式。

Hooks原理

原理是维护一个Hooks链表。组件的Fiber链表树中，每个组件维护hooks链表和指针，每次触发时顺序执行一遍。
Hooks原理

Redux

用途：

• 跨父子组件通信
• 共享数据管理

好处：可追踪，单向数据流，没有副作用
缺点：滥用会让组件变得难以维护，一些临时状态没必要放进去

React-redux：connect 原理，是一个高阶函数，把props和dispatch的action 挂在props, 订阅store 更新props,刷新组件。

React setState同步还是异步

React 在更新/创建阶段时异步，合成事件内异步。原生绑定事件和定时器内同步。
setState时根据一个变量判断判断是立即更新还是丢到队列批量更新。

React事件

// todo