React.memo 如何使用？

最新推荐文章于 2024-05-15 16:10:07 发布

前端西瓜哥

最新推荐文章于 2024-05-15 16:10:07 发布

阅读量909

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/fe_watermelon/article/details/125940475

版权

大家好，我是前端西瓜哥。

最近做的新功能有性能问题，所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。

组件状态更新和重渲染

当某个组件里的状态发生改变时，React 会调用该组件的 render 方法，生成新的 React 元素树，和原来的虚拟 DOM 对比，找出不同的地方然后给真实的 DOM 打补丁。

如果有子组件，它也会被重新渲染。

这里有一个问题：有些子组件其实并没有发生状态改变，也被重新渲染，占用了 CPU 资源。

虽然这个操作是不必要的，但 React 并不能知道传给子组件的 props 是否发生了改变。

但 React 提供了 React.memo() 方法，希望你能通过它来告知 React 该组件是否跳过重渲染。

React.memo

React.memo 是一个 高阶组件。

所谓高阶组件，其实指的就是一个接收组件并返回一个组件的函数。起名参考了高阶函数，但确实花里胡哨了一些。

React.memo 的作用是缓存组件，它会对传入的组件加上缓存功能生成一个新组件，然后返回这个新组件。

在传给组件的 props 的属性和值没有发生改变的情况下，它会使用最近一次缓存的结果，而不会进行重新的渲染，实现跳过组件渲染的效果。

下面是一个示例：

const Comp = ({ color }) => {
  return (
    <div>
      <div>{color}</div>
    </div>
  );
};

// 生成一个可以缓存结果的组件
const MemoriedComp = React.memo(Comp);

当我们使用 MemoriedBox 时，如果传入的 props.color 保持不变的话，MemoriedBox 组件就不会发生重渲染。

这里有一个演示例子：https://codesandbox.io/s/react-memo-huan-cun-ce-shi-k96vd4

保证 props 的有效对比

比较算法

React.memo 判断是否使用缓存，默认使用的是浅比较，也就是只比较第一层的 key。

shallowEqual 主要是通过 Object.is 来对比。源码实现地址如下：

https://github.com/facebook/react/blob/HEAD/packages/shared/shallowEqual.js

有时候我们希望自定义比较方法，这时候我们可以使用 React.memo 方法的第二个参数，传入我们自定义的比较方法。

const isEqual(prevProps, nextProps) {
  // 自定义对比方法
}

const MemoriedComp = React.memo(Comp, isEqual);

自定义比较方法会拿到两参数：旧的和新的 props 对象，然后根据该方法的返回值来决定是否使用缓存。如果为真值，使用缓存，否则重新渲染并把新的渲染结果缓存下来。

假设我们有一个 prop 是数组，但因为声明语句写在组件里，所以每次渲染时都会生成一个指向新的内存空间的另一个数组，导致新旧 prop 指向不同的内存对象，但它们的数组元素却是依次相等。

[1, 2] === [1, 2] // false

有时候我们想将它们认为 “相同”，能够触发 React.memo 方法的缓存。

用浅比较会返回 false，进行重渲染，不符合我们的预期。这时候就可以使用自己实现的 深比较（深度递归比较），可以考虑使用比较有名的 lodash.isEqual。

缓存函数

对于数组和普通对象，我们可以用深比较来判断 “相等”。但对于函数组件中每次都会被重新构建的函数，显然是行不通的。函数没有结构。

对于函数，我们可以使用 useCallback。

const Comp = () => {
 const onClick = React.useCallback(() => {
  if (isOk) sumbit();
 }, [isOk])
  
  return (
   <div>
     <Button onClick={onClick}></Button>
    </div>
  )
}

useCallback 接受一个函数和一个依赖项数组，当依赖项数组里的元素没有改变时，会使用最后一次缓存的函数，否则会使用传入的新函数。

除了用 useCallback 缓存函数，我们还可以用 useMemo 来缓存其他的对象值。