如何使用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 我们将返回的ExpensiveTree作为useMemo返回值，theme作为依赖。
这样，即使AppContext改变导致Tree反复render，ExpensiveTree也只会在theme改变后render。
原理解析
要理解这么做有效的原因，需要了解三点：
useMemo返回值是什么
函数组件的返回值是什么
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://6mz.cn/article/jdidio.html