React优化相关

[MyPrototypeWhat]

React优化相关

减少Render次数

• PureComponent：

  • 相当于一个HOC，将组件的shouldComponentUpdate覆盖

  • 在shouldComponentUpdate中执行浅比较，遍历第一层，使用Object.is比较值和引用地址

  • 缺点：

    • 如果引用类型为多层，浅比较则失效

    • 如果JSX中，往子组件传入的props为下文这样，会导致失效

      <Son value={value||[]}> // 每次渲染都是一个新的数组，引用地址改变

• React.memo：

  • 仅检查 props 变更
  • 默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现
  • 第二个参数参数为(preProps,nextProps)，返回值与shouldComponentUpdate相反

• Context：

  • 当value值变化时会引发所有使用Context组件的更新

减少渲染数量

• 懒加载：React.lazy等（常见于路由懒加载）

• 虚拟列表

• 受控组件细化

  • 受控组件通常会改变state属性，从而引发渲染，可将与受控组件相关的逻辑单独摘出，这样state更新只会引发部分渲染

• 独立数据请求

  • 假设一个组件内部有三个请求，后续其中一个请求重新发起请求，就会导致组件重新渲染
  • 如果把三个请求独立成为三个组件，这样就算重新请求也只会引发局部重新渲染

• 手动批量更新

  • unstable_batchedUpdates：react-dom 中提供了unstable_batchedUpdates方法进行手动批量更新

     const handerClick = () => {
        Promise.resolve().then(()=>{
            unstable_batchedUpdates(()=>{
                setB( { ...b } ) 
                setC( c+1 ) 
                setA( a+1 )
            })
        })
    }
     // 三次更新合并为一次

  • 上文是因为在legacy模式下。将ReactDom.render改为createRoot也可解决上述问题

减少渲染计算量

• useMemo、useCallback：防止内次渲染导致重新生成该变量

Diff方面

• 准确使用key：避免将key赋值为索引
• 减少跨层级操作：diff会将跨层级元素删除并重建
• 减少更改type或者tagName操作：type更改会导致该元素及其子元素节点被删除，并重新创建新节点