2020-09-20

React性能优化方案

1. 减少不必要渲染，如⽤shouldComponentUpdate（返回true或false决定是否渲染）、PureComponent（只用于class组件，内置shouldComponentUpdate，值没有变化时点击不更新，缺点是必须要⽤class形式，⽽且要注意是浅⽐较，类似于例子中obj格式的，无法进行比较）、React.memo（function组件）实现。
   constructor(props) {
   super(props);
   this.state = {
   counter: 0,
   // obj: {
   // num: 2,
   // },
   };
   }
   setCounter = () => {this.setState({
   counter: 100,
   // obj: {
   // num: 200,
   // },
   });

2. 数据缓存。
   useMemo缓存参数、useCallback缓存函数。
   函数、对象尽量不要使⽤内联形式（如context的value object、refs function，源码中会使用全等号进行比较，如果是object或者function，那么一定不相等）。
   Router中的内联函数渲染时候使⽤render或者children，不要使⽤component。当你⽤component的时候，Router会⽤你指定的组件和React.createElement创建⼀个新的[React element]。这意味着当你提供的是⼀个内联函数的时候，每次render都会创建⼀个新的组件。这会导致不再更新已经现有组件，⽽是直接卸载然后再去挂载⼀个新的组件。因此，当⽤到内联函数的内联渲染时，请使⽤render或者children。

3. 不要滥⽤功能项，如context（如果发生变化子组件都要渲染）、props等。

4. 懒加载，对于⻓⻚列表分⻚加载。

5. 减少http请求。