1024用代码改变世界useMemo 和 useCallback|React.memo使用场景

Posted codeMak1r.小新

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1024用代码改变世界useMemo 和 useCallback|React.memo使用场景相关的知识,希望对你有一定的参考价值。

欢迎来到我的博客
📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 React/小程序🔥,中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!

前言

useMemo / useCallback都是React内置的用于性能优化的hook,它们常常被开发人员用来包裹(缓存memory),但是真的是所有的数据、函数、变量都需要使用useMemo / useCallback去缓存吗?
可直接看结论。

useMemo / useCallback都是用以性能优化的hook,开发者经常担心两次渲染间的重复计算,而去过度使用useMemo / useCallback,担心性能问题的开发者们,给几乎每个变量都套上了useMemo,给每个函数都套上了useCallback……其实这是不可取的,这让代码看起来像是必须使用这两个hook去优化一样,无处不在。

本文希望通过分析 useMemo/useCallback 的目的、方式、成本,以及具体使用场景,帮助开发者正确的决定如何适时的使用他们。赶时间的读者可以直接拉到底部看结论。

我们先从 useMemo/useCallback 的目的说起。

何时应该使用useMemo / useCallback ?

防止不必要的 effect

小新在编码的过程中,如果effect有依赖的变量,我就会把effect里的内容提到effect外面,包装成一个函数,再用useCallback去缓存这个函数,那么只要这个变量不变化,effect依赖的这个函数也不会改变(不使用useCallback缓存的话,此函数的内存地址可能会发生变化,哪怕其内部不改变)。

const Component = () => 
  const a = React.useMemo(() => ( test: 1 ), [])
  React.useEffect(() => 
    // dosomthing
  , [a])
  return (
    <div>a.test</div>
  )

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component />);

只有a的值改变时,dosomthing才会重新触发,而a被useMemo缓存了,这就导致非必要时,effect不会重新创建,这是好的优化;

useCallback也是一样的,(useCallback其实是useMemo的语法糖)

const Component = () => 
  const ajax = React.useCallback(() => 
    console.log('^ajax somthing^!')
  , [])
  React.useEffect(() => 
    // dosomthing
    ajax()
  , [ajax])
  return (
    <div></div>
  )

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component />);

此代码段中的Component组件,只有当ajax函数变化时才会重新创建一个effect,这就导致,我们可以把仅需要在页面首次加载时发送的ajax请求封装成一个函数,并且用useCallback优化缓存下来,这是好的优化;

防止不必要的re-render

我们首先思考,当什么情况出现时,组件才会re-render

  • 当本身的props或state改变时;
  • context上下文的value改变时,使用该值的组件都会重新render;
  • 当父组件重新render时,哪怕传入子组件的props没有发生改变,子组件(们)也会随着父组件的render,重新render;

第三个re-render经常被开发者忽视,其实这一点很重要!!

例如,

const Component = () => 
  const [state, setState] = React.useState(1);

  const onClick = React.useCallback(() => 
    console.log('^click somthing^!')
  , []);

  return (
	// 哪怕onClick使用了useCallback缓存优化,但是自组件仍会re-render
    <Child onClick=onClick />
  )

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component />);

哪怕onClick使用了useCallback缓存优化,但是自组件仍会re-render。这里的useCallback似乎是无效的。

那么,怎么让其生效呢?

我们可以搭配React.memo去使用:

const PageMemoized = React.memo(Page);

React.memo本质是一个HOC,它接受一个组件作为参数。被memo包裹的Page组件,会在Page组件的父组件Component重新render时,对比传入Page组件的props( 浅比较,复杂对象只比较第一层),若props没有发生改变,则Pages组件就不会re-render

所以, 必须同时缓存 onClick 和组件本身,才能实现 Page 不触发 re-render。

PageMemoized会在父组件重新render时,浅比较传入的onClick是否变化再决定PageMemoized组件是否需要re-render,但是onClick正好被useCallback缓存了,所以这里的子组件不会re-render(●–●)

但是,如果PageMemoized组件从父组件不止接受了onClick一个prop,那么前面的优化就前功尽弃。比如,

// 省略重复代码

<PageMemoized onClick=onClick value=[1, 2, 3] />

每次父组件重新re-render时,传入子组件的onClick函数虽然没有改变(useCallback的功劳),但是value并没有做任何缓存,此时,子组件PageMemoized,还是逃脱不了re-render的命运……

怎么解决呢?

// 省略重复代码
const value = useMemo(() => 
  return [1, 2, 3]
, [])

// ...
<PageMemoized onClick=onClick value=[1, 2, 3] />

这样的话,value变量也被缓存起来了,父组件re-render时,自组件并没有re-render。

由此我们知道, 必须同时缓存 所有的prop 和组件本身,才能实现子组件 不触发 re-render。

如何判断子组件是否需要缓存?

如果所有的子组件都需要缓存,那未免也太麻烦了……不光需要memo子组件,还需要将现有的props都进行缓存,并且还包括了后续编码可能出现的其他props……

除此之外,还有更严重的后果,如果项目中的组件缓存过多的话,可能会导致 项目在首次初始化时因为组件缓存被拖慢渲染时间。

所以,局部的,有选择的去使用memo,比全局都使用memo更加恰当、更加优雅。

至于怎样判断组件的渲染成本,可以借助React Devtool等工具去判断,或者根据开发者经验人工判断。

防止不必要的计算

React官方文档介绍:

useMemo返回一个 memoized 值。
把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

什么才是高开销呢?

借助前端经典面试题提供的测试用例,对包含 250 个 item 的数组 countries 进行排序、渲染,并计算耗时。结果发现,排序耗时仅用了4ms,而渲染这些List却用了20ms,5倍的差距!而日常开发中,大部分情况下都是,计算的数据更少,而渲染的组件更多。这也就说明了, 大部分情况下,真正的性能瓶颈不是计算,而是渲染。 所以应该把useMemo用在渲染昂贵的组件上,而不是计算上。

那为什么不给所有的组件都使用useMemo呢?前面也说了,缓存会影响项目初始化的速度,而且可能会导致与PureComponent相同的问题,传入子组件的prop浅层并无变化,于是被useMemo包裹的子组件并不会re-render,但其实此时正需要它re-render。

结论

  1. 大部分的 useMemo 和 useCallback 都应该移除,他们可能没有带来任何性能上的优化,反而增加了程序首次渲染的负担,并增加程序的复杂性。
  2. 使用 useMemo 和 useCallback 优化子组件 re-render 时,必须同时满足:
    • 子组件被React.memo 或 useMemo 缓存;
    • 子组件所有的prop都被缓存。
  3. 不推荐默认给所有组件都使用缓存,大量组件初始化时被缓存,可能导致过多的内存消耗,并影响程序初始化渲染的速度。

专栏订阅入口【React–从基础到实战】

查看哪些redis命令拖慢了redis

Redis提供了一个下面这样的命令统计工具:

127.0.0.1:6379> INFO commandstats

# Commandstats
cmdstat_get:calls=113521268,usec=599075196,usec_per_call=5.28
cmdstat_set:calls=3080568,usec=20100483,usec_per_call=6.52
cmdstat_setnx:calls=130299,usec=769499,usec_per_call=5.91
cmdstat_setex:calls=43550680,usec=323048026,usec_per_call=7.42
cmdstat_del:calls=678167,usec=4675634,usec_per_call=6.89
cmdstat_exists:calls=70131400,usec=274202383,usec_per_call=3.91
cmdstat_incr:calls=1303677,usec=8600579,usec_per_call=6.60
cmdstat_rpush:calls=149308,usec=1251437,usec_per_call=8.38
cmdstat_lpush:calls=604715,usec=20602443,usec_per_call=34.07
cmdstat_lpop:calls=260342,usec=1052702,usec_per_call=4.04
cmdstat_llen:calls=1080344,usec=5086433,usec_per_call=4.71
cmdstat_lrange:calls=1455615,usec=11669398,usec_per_call=8.02
cmdstat_zadd:calls=1134485,usec=151418246,usec_per_call=133.47
cmdstat_zrange:calls=2337130,usec=60310695,usec_per_call=25.81
cmdstat_zrevrange:calls=3759,usec=139180,usec_per_call=37.03
cmdstat_zcard:calls=2012697,usec=9566304,usec_per_call=4.75
cmdstat_hset:calls=168312,usec=999030,usec_per_call=5.94
cmdstat_hget:calls=13762721,usec=48754727,usec_per_call=3.54
cmdstat_hmset:calls=18140305,usec=359516140,usec_per_call=19.82
cmdstat_hincrby:calls=4812055,usec=50845269,usec_per_call=10.57
cmdstat_hdel:calls=267847,usec=1053461,usec_per_call=3.93
cmdstat_hgetall:calls=102520184,usec=1470815749,usec_per_call=14.35
cmdstat_hexists:calls=444240,usec=1875602,usec_per_call=4.22
cmdstat_incrby:calls=252023,usec=1752467,usec_per_call=6.95
cmdstat_select:calls=50892530,usec=175148544,usec_per_call=3.44
cmdstat_expire:calls=22526864,usec=137277313,usec_per_call=6.09
cmdstat_keys:calls=81047,usec=28460925588,usec_per_call=351165.69
cmdstat_ping:calls=22976155,usec=54843018,usec_per_call=2.39
cmdstat_type:calls=53,usec=257,usec_per_call=4.85
cmdstat_sort:calls=1401251,usec=79416000,usec_per_call=56.68
cmdstat_info:calls=73,usec=80129,usec_per_call=1097.66
cmdstat_ttl:calls=1702,usec=7988,usec_per_call=4.69
cmdstat_slowlog:calls=9,usec=453,usec_per_call=50.33

通过这个工具可以查看所有命令统计的快照,比如命令执行了多少次,执行命令所耗费的微秒数(每个命令的总时间和平均时间)

由上面可以看到keys命令非常慢,平均用时351165.69微秒,相当于每条命令平均耗时351毫秒,这个慢命令会阻塞后边的命令。

只需要简单地执行CONFIG RESETSTAT命令就可以重置,这样你就可以得到一个全新的统计结果

以上是关于1024用代码改变世界useMemo 和 useCallback|React.memo使用场景的主要内容,如果未能解决你的问题,请参考以下文章

1024程序员节|代码改变世界,科技创造未来 虚竹哥联合机械工业出版社好书相赠

1024程序员节|代码改变世界,科技创造未来 码农飞哥联合机械工业出版社好书相赠

1024程序员节|代码改变世界,科技创造未来 码农飞哥联合机械工业出版社好书相赠

useMemo和useCallback的区别和使用

useMemo, useCallback, useEffect 三者区别

1024程序员节神评整理,要笑死了哈哈