React 性能优化常用的方法一. 不使用性能优化API 1. 分离变与不变的部分 2. 容器模式 3. key 4.

一. 不使用性能优化API

1. 分离变与不变的部分

 命中React框架内部代码中的优化策略

2. 容器模式

   const ComA = props => return (<div>{props.num}</div>);
   const ComAContainer = props => {
      if(!props.visible) return null;
      return <ComA {...props}/>
   }

3. key

   复用节点

4. loadable component

   组件动态引入

二. 使用性能优化API

1. shouldComponentUpdate

 当和PureComponent 同时使用时权重大于 PureComponent
 forceUpdate 不会走shoulComponentUpdate流程
 注意：无法阻止context改变而带来的渲染穿透

2. pureComponent

 以浅层对比prop和state实现了shouldComponentUpdate 功能
 注意：无法阻止context改变而带来的渲染穿透

3. memo

 使 props前后比较从 === 变成了 浅比较
 注意：子组件使用memo后，传递给子组件的方法 结合使用useCallback,
      不要直接传递 () => {}

4. useMemo

 1. 缓存运算量比较大的值
 2. 缓存一个组件
 3. 缓存一个函数
 注意第二个参数，依赖项

5. useCallback

 1. 缓存一个函数，结合memo使用，可以减少render 次数
 注意第二个参数 依赖项

三. 长列表无限滚动优化

1. new IntersectionObserver

 监听元素是否出现在可视区域，以及是否消失在可视区；
 只有出现在可视区才渲染，消失在可视区则移除DOM

2. data.slice方案

前端 slice固定长度数据，然后监听滚动条滚动距离，大于一个列表项高度时，只渲染固定长度的数据；
缺点：每次渲染固定长度数据；