社区编辑申请
注册/登录
一篇带给你 React.memo 如何使用?
开发 前端
React.memo 是一个 高阶组件。所谓高阶组件,其实指的就是一个接收组件并返回一个组件的函数。起名参考了高阶函数,但确实花里胡哨了一些。

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

最近做的新功能有性能问题,所以我想尝试优化一下 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 来缓存其他的对象值。

避免负优化

  • 只渲染一次,之后都不会更新的组件,不要使用 React.memo。
  • props 每次都会改变的组件,不要使用 React.memo,使用 React.memo 只会带来不必要的新旧 props 比较和无意义的缓存。
  • 组件如果很简单,不建议使用 React.memo,并不能带来多大提升,而使用 React.memo 本身就有心智负担。
  • 如果你无法很好地量化性能,不建议使用 React.memo。

结尾

React.memo 可以帮助我们跳过一些不必要的组件渲染。但要维护好对象类型 prop 的不改变,确实对我们造成不少的心智负担。

React.memo 并不是一定会有正收益的,因为缓存也是有成本的。

责任编辑:姜华 来源: 今日头条
相关推荐

2022-04-18 08:57:32

React 18前端

2022-03-03 22:00:19

Hooks函数组件React

2022-02-16 08:11:52

组件渲染前端

2022-05-20 15:27:41

React工具Vue

2021-07-29 07:55:20

2020-04-07 17:31:29

React容器程序员

2020-05-08 19:52:31

Reactreact.js前端

2020-09-16 14:39:13

2021-03-07 09:19:31

React代码整洁代码的实践

2018-11-28 10:00:42

同话题下的热门内容

如何创建一个无代码的自助客户聊天机器人Java 服务 Docker 容器化优秀实践程序员不得不知道的 API 接口常识如何提高 TypeScript 的代码质量?11个 ES2022(ES13)中惊人的 JavaScript 新特性聊聊 13 种锁的实现方式使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库Stream流原理与用法总结,你学会了吗?

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号