避免组件重复渲染

React

• use::

  memo

  • React
  • father::高阶组件
  • 一种[father::函数缓存]
  • 通过用memo()包装函数式组件，只有当propB实际改变值时它才会重新渲染，无论其父组件重新渲染多少次。
    • React 将使用 Object.is 来浅比较每个 prop。这就意味着当存在数组、对象、函数等形式的入参时，需要格外注意
      • base::js判断对象相同
    • 需要搭配[use::useCallback]使用

  指向原始笔记的链接

• 对于值是对象的[base::context]，给context提供值时使用memo包裹
  • 否则所有依赖此上下文的子组件都将随着 Provider 的父组件的重渲染而渲染
• 合并异步的state更新
  • 异步获取多个接口数据的场景中，相比各个接口请求完成后设置独立的 state，可以等待他们都请求完成之后，合并设置到一个 state 中。这样可以有效减少重渲染次数
  • base::

    批量化setState

    • base::

      setState的执行时机

      React

      梗概

      • 大部分情况下都是呈现一种“异步”的样子 ^dwnjry
        • setState的“异步”并不是说内部由异步代码实现
        • 只是react的事件监听函数和hook的调用顺序在更新之前，导致没法立马拿到更新后的值，形成了所谓的“异步”
      • 在React外通常会立刻执行更新，立刻获取到更新后的state

      示例

      console.log(count);  // 0
      setCount(count + 1); // Request a re-render with 1
      console.log(count);  // Still 0!

      指向原始笔记的链接

    • setState的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

    指向原始笔记的链接