React 性能优化

React性能优化

性能优化的重点

  1.setState之后，组件进行渲染，无论state是否改变；
  2.父组件渲染后，子组件跟着渲染；

hooks之前

  class组件
  1.class *** extends React.PureComponent      
        对props进行一次浅比较。局限性：只有传入值属性的对比，如果传入的值内部发生变化，PureComponent 是会出现，数据更新，视图不更新的情况的
  2.生命周期shouldComponentUpdate
        shouldComponentUpdate (nextProps, nextState) {
              if (nextProps.name === this.props.name) return false
              return true
        }
        通过对比前后props，state返回true/false决定组件是否渲染
  function组件
  1.React.memo（） 高阶组件，类似于pureComponent，对class组件不起作用
        React.memo() 可以支持指定一个参数，可以相当于 shouldComponentUpdate 的作用
        const isEqual = (prevProps, nextProps) => {
            if (prevProps.number !== nextProps.number) {
                return false;
            }
            return true;
        }
        export default memo((props = {}) => {
            console.log(`--- memo re-render ---`);
            return (
                <div>
                    {/* <p>step is : {props.step}</p> */}
                    {/* <p>count is : {props.count}</p> */}
                    <p>number is : {props.number}</p>
                </div>
            );
        }, isEqual);

hooks

  React.useMemo() 
  React.callback() 

在子组件不需要父组件的值和函数的情况下，只需要使用 memo 函数包裹子组件即可。

如果有函数传递给子组件，使用 useCallback

如果有值传递给子组件，使用 useMemo

useEffect、useMemo、useCallback 都是自带闭包的。也就是说，每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(state, props)，所以每一次这三种hooks的执行，反映的也都是当前的状态，你无法使用它们来捕获上一次的状态。对于这种情况，我们应该使用 ref 来访问。