其他分享
首页 > 其他分享> > React 性能优化

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 来访问。

标签:return,nextProps,性能,React,props,组件,优化,memo
来源: https://www.cnblogs.com/-swz/p/14174411.html