189 8069 5689

如何使用useMemo

本篇内容主要讲解“如何使用useMemo”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用useMemo”吧!

创新互联专注于古田网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供古田营销型网站建设,古田网站制作、古田网页设计、古田网站官网定制、成都小程序开发服务,打造古田网络公司原创品牌,更为您提供古田网站排名全网营销落地服务。

作为「性能优化」手段,一般用useMemo缓存函数组件中比较消耗性能的计算结果:

function App() {   const memoizedValue = useMemo(     () => computeExpensiveValue(a, b),     [a, b]   );   // ... }

只有在依赖项改变后才会重新计算新的memoizedValue。

你有没有想过,如果用useMemo缓存函数组件的返回值,会怎么样呢?

举个例子

我们有个全局context —— AppContext。

由于同学们偷懒,随着项目的迭代,新增的context都选择放在AppContext里,导致AppContext包含的内容越来越多。

现在我们有个Tree组件,他会渲染一个很耗性能的大组件ExpensiveTree。

function Tree() {   let appContextValue = useContext(AppContext);   let theme = appContextValue.theme;    return ; }

该组件内部依赖AppContext中的theme状态。

由于AppContext中包含很多与theme无关的state,导致每次其他无关的state更新,Tree都会重新render,进而ExpensiveTree组件也重新render。

现在这个优化任务交到了你手上,该怎么办呢?

优化ExpensiveTree

这时候,useMemo就能派上用场:

function Tree() {   let appContextValue = useContext(AppContext);   let theme = appContextValue.theme;    return useMemo(() => {     return ;   }, [theme]) }

我们将返回的ExpensiveTree作为useMemo返回值,theme作为依赖。

这样,即使AppContext改变导致Tree反复render,ExpensiveTree也只会在theme改变后render。

原理解析

要理解这么做有效的原因,需要了解三点:

  1. useMemo返回值是什么

  2. 函数组件的返回值是什么

  3. React组件在什么时候render

回答第一个问题:useMemo会将第一个参数(函数)的返回值保存在组件对应fiber中,只有在依赖项(第二个参数)变化后才会重新调用第一个参数(函数)计算一个新值。

回答第二个问题:函数组件的返回值是JSX对象。

同一个函数组件调用多次,返回的是多个「不同」的JSX对象(即使props未变,但JSX是新的引用)。

按照以上两个回答,我们可以得出结论:

  • 以上useMemo用法实际上在函数组件对应的fiber中缓存了一个完整的JSX对象

第三个问题,函数组件需要同时满足如下条件才不会render:

1 oldProps === newProps

前后两次更新props全等,注意是「全等」。

2 组件context没有变化

3 workInProgress.type === current.type

组件更新前后fiber.type未变化,比如div没有变为p。

4 !includesSomeLane(renderLanes, updateLanes)

当前fiber上不存在更新,或者存在更新但优先级低。

  • 更详细的解释,可以参考这篇文章:React组件到底什么时候render?

当我们不使用useMemo包裹返回值,每次Tree render返回的都是全新的JSX对象。

所以对于ExpensiveTree,oldProps !== newProps。

再看2:ExpensiveTree内部context没变,满足

再看3:ExpensiveTree更新前后type都是ExpensiveTree,满足

再看4: ExpensiveTree内没有状态更新,满足

所以,当我们使用useMemo包裹ExpensiveTree后,当theme不变,每次Treerender后返回的都是同一个JSX对象,满足第一条。

基于这个原因,ExpensiveTree不会render。

到此,相信大家对“如何使用useMemo”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


名称栏目:如何使用useMemo
URL地址:http://cdxtjz.com/article/jdidio.html

其他资讯