diff

react diff 原理

概念

调和函数(源码)是在fiber树构(对比更新)过程中对旧fiber节点新reactElement进行比较, 判定旧fiber节点是否可以复用的一个比较函数.


h7ml
  • react
大约 8 分钟
hook-api

useEffect 依赖执行关系

useEffect 第二个参数[]如何影响 fn 的执行?换句话说,它的第二个参数是如何影响 fiber 创建 Passive Effect 的?

  1. 不包含第二个参数 useEffect(() => {})Mount & Update 时,每次 render 时都会创建一个 Passive Effect;
  2. 包含一个空数组[]作为依赖项 useEffect(() => {}, []),它会在 mount 时,创建 Passive Effect

h7ml
  • react
大约 1 分钟
requestIdleCallback

实现 requestIdleCallback

浏览器一帧

当前大多数的屏幕刷新率都是 60hz,也就是每秒屏幕刷新 60 次,低于 60hz 人眼就会感知卡顿掉帧等情况,同样我们前端浏览器所说的 FPS(frame per second)是浏览器每秒刷新的次数,理论上 FPS 越高人眼觉得界面越流畅,在两次屏幕硬件刷新之间,浏览器正好进行一次刷新(重绘),网页也会很流畅,当然这种是理想模式, 如果两次硬件刷新之间浏览器重绘多次是没意义的,只会消耗资源,如果浏览器重绘一次的时间是硬件多次刷新的时间,那么人眼将感知卡顿掉帧等, 所以浏览器对一次重绘的渲染工作需要在 16ms(1000ms/60)之内完成,也就是说每一次重绘小于 16ms 才不会卡顿掉帧。


h7ml
  • react
大约 6 分钟
setState

setState 是同步还是异步的?

trigger = (isBatchedUpdate: boolean) => {
  const runSetState = () => {
    this.setState({ count: this.state.count + 1 }, () => console.log(this.state.count));
  };

  if (isBatchedUpdate) {

h7ml
  • react
大约 2 分钟
synthetic-event

React 合成事件

概览

v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中.

引入官方提供的图片:


h7ml
  • react
大约 8 分钟