React性能优化

一，class组件性能优化1：shouldComponentUpdate

1.shouldComponentUpdate是react其中一个生命周期钩子，在页面要更新时调用。

2.shouldComponentUpdate(nextProps,nextState)有两个参数，第一个是更新之后的组件的props,第二个是更新后的组件的自身的state。

3.shouldComponentUpdate返回值为 false时组件不会更新，返回值为true时组件更新。

4.根据以上我们可以拿nextProps和nextState和当前的props和state比较，当更新前和更新后值都相同时则返回false，以此达到性能优化的目的。

二，class组件性能优化2：React.PureComponent

1.React.PureComponent 用于生成纯组件，和 React.Component 很相似。

2.两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

3.因此React.PureComponent 的性能优化的方式也是通过shouldComponentUpdate，只是不需要我们自己手动实现。

4.需要注意的是React.PureComponent的比较是浅比较，对于引用类型的数据，只要地址不变，都会认为是相等的

三，函数组件性能优化1：React.Memo

1.React.Memo是一个高阶组件，接受一个组件作为参数返回一个新的组件

2.React.Memo用于函数组件的优化。

3.React.Memo只浅比较的检查props的变化，若要自定义比较函数可以传入第二个参数。

4.React.Memo的第二个参数是一个函数:fn(prevProps,nextProps),第一个参数是更新前的props,第二个参数是更新后的props,通过比较两者，若相同则返回false,不同返回true。注意这个是和ShouldComponentUpdate相反的。

5.若函数组件内部使用了useState等hook,当内部state变化时，组件仍会更新。

四，函数组件性能优化2：useMemo

1.React.Memo可以用于控制整个 component 的部分不要进行 re-render，

2.useMemo实现了更加细粒度的性能优化，可以控制component某个部分不要进行re-render。

3.useMemo形式为useMemo((a,b)=>{},[a,b]),接受两个参数

4.useMemo() 返回的是一个 memoized 值，只有当依赖项，比如上面的 a,b 发生变化的时候，才会重新计算这个 memoized值，即重新执行第一个函数参数。memoized 值不变的情况下，不会重新触发渲染逻辑。