揭开 PureComponent 和 memo 的神秘面纱——深度解析源码优化之道

前端

2022-12-29 07:12:00

React 优化利器：PureComponent 与 memo 深度剖析

在 React 开发中，性能优化是至关重要的，而 PureComponent 和 memo 则是两大组件优化利器，助力提升应用响应速度和用户体验。本文将深入剖析这些工具的工作原理，并提供实战指南，帮助你有效利用它们。

PureComponent：浅比较优化之道

PureComponent 是 React 内置组件，采用浅比较机制进行优化。浅比较只检查组件的 props 和 state 是否变化，若发生变化则重新渲染，否则不渲染。这有效减少了不必要的渲染，提升了性能。

memo：函数式组件的优化利器

memo 适用于函数式组件，它通过缓存组件渲染结果来优化渲染。当组件的 props 未发生变化时，直接返回缓存结果；若 props 变化，则重新渲染组件。

源码解析：揭秘优化背后的奥秘

深入源码可以更好地理解 PureComponent 和 memo 的工作原理：

PureComponent 源码解析

class PureComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  }
}

shouldComponentUpdate 方法通过 shallowEqual 浅比较 props 和 state，决定是否重新渲染。

memo 源码解析

const memo = (Component) => {
  const memoized = (props) => {
    const key = JSON.stringify(props);
    const cached = useMemo(() => {
      return <Component {...props} />;
    }, [key]);
    return cached;
  };
  return memoized;
};

memo 利用 useMemo 缓存组件渲染结果，根据 props 的变化决定是否从缓存返回。

实战指南：优化组件

利用 PureComponent