usememo的核心思想是通过缓存计算结果并在依赖项未变化时直接返回缓存值来避免重复计算，其关键在于依赖项数组的正确使用，它决定了何时重新执行计算；该机制解决了因不必要的重复计算和引用变化导致的性能瓶颈问题；usememo用于缓存值，而usecallback用于缓存函数引用，两者共同优化react组件的渲染性能。
在JavaScript中实现
useMemo
的核心思想，或者说“记忆化”一个值的过程，本质上是缓存一个计算结果，并在其依赖项没有发生变化时，直接返回这个缓存结果，避免不必要的重复计算。这就像是你做了一道复杂的数学题，把答案记下来，下次遇到同样的题目，只要确认条件没变，就直接写答案，不用再从头算一遍。
解决方案
要实现一个简化的
useMemo
，我们需要一个机制来存储上一次的计算结果和依赖项，并在每次调用时比较当前的依赖项与上一次的是否一致。
function createUseMemo() { let lastValue = null; let lastDependencies = []; return function useMemo(computeFunction, dependencies) { // 检查依赖项是否发生变化 const dependenciesChanged = dependencies.some((dep, index) => { // 简单比较，对于引用类型，这可能不够严谨，但足以说明原理 return dep !== lastDependencies[index]; }); if (dependenciesChanged || lastDependencies.length === 0) { // 如果依赖项发生变化，或者这是第一次运行，重新计算 lastValue = computeFunction(); lastDependencies = dependencies; } // 返回缓存的值 return lastValue; };}// 实际使用时，通常会像React Hooks那样，每个组件实例有自己的状态// 这里为了演示，我们创建一个实例const myUseMemo = createUseMemo();// 示例用法let counter = 0;function expensiveCalculation(num) { console.log('执行耗时计算...'); // 模拟一个耗时操作 for (let i = 0; i expensiveCalculation(counter), [counter]);console.log('结果1:', result1); // 会执行计算counter = 0; // 依赖项未变// 第二次调用，依赖项未变，应该直接返回缓存值const result2 = myUseMemo(() => expensiveCalculation(counter), [counter]);console.log('结果2:', result2); // 不会执行计算counter = 1; // 依赖项改变// 第三次调用，依赖项改变，会重新执行计算const result3 = myUseMemo(() => expensiveCalculation(counter), [counter]);console.log('结果3:', result3); // 会执行计算
这个简化的实现展示了
useMemo
的核心逻辑：比较依赖项，决定是否重新执行计算函数。在实际的React
useMemo
中，它会更复杂，例如处理多个
useMemo
调用、确保在组件卸载时清理状态、以及更健壮的依赖项比较机制（比如
Object.is
或深度比较）。
为什么我们需要记忆化值？它解决了什么痛点？
记忆化，或者说缓存计算结果，在前端开发中解决了一个非常实际且常见的痛点：性能瓶颈。我经常看到一些应用在用户交互时出现卡顿，或者在数据量稍大时就变得迟缓，很多时候，这都源于不必要的重复计算或渲染。
想象一下，你有一个组件，它需要根据一些输入数据进行复杂的计算，比如排序一个巨大的列表，或者处理大量数据以生成一个图表。如果这个组件的父组件仅仅是更新了一个与当前计算无关的状态（比如一个简单的计数器），导致子组件重新渲染，那么这个昂贵的计算就会被再次执行。这就像你每次去厨房拿水，都要重新把水烧开一遍，即使水壶里还有热水。这显然是低效的。
useMemo
的出现，就是为了解决这种“无谓的消耗”。它允许我们“记住”一个特定计算的结果，并只在它的“输入”（也就是依赖项）发生变化时才重新计算。这对于那些计算成本高昂、或者生成引用类型（如对象、数组、函数）的场景尤其重要。因为在React的渲染机制里，如果一个子组件的props是引用类型，即使内容没变，只要引用地址变了，它也会触发不必要的重新渲染。
useMemo
能确保在依赖不变的情况下，返回同一个引用，从而避免了下游组件的不必要更新。对我来说，这不仅仅是优化性能，更是一种编写“更聪明”代码的方式。
useMemo
useMemo
的依赖项数组：为什么如此重要？
useMemo
的第二个参数，那个依赖项数组（
dependencies array
），在我看来，是理解和正确使用
useMemo
的关键所在。它明确地告诉
useMemo
：“嘿，只有当这些值中的任何一个发生变化时，我才需要重新执行我的计算函数。”
它的重要性体现在几个方面：
精确控制何时重新计算：没有它，
useMemo
就不知道何时应该更新缓存的值。如果数组是空的（
[]
），意味着这个计算只在组件首次渲染时执行一次，之后永远返回相同的值。这在某些场景下很有用，比如初始化一个永远不变的配置对象。避免陈旧闭包陷阱：这是我个人在实践中遇到最多的问题之一。如果你的计算函数内部使用了某个变量，但这个变量没有被包含在依赖项数组中，那么当这个变量更新时，
useMemo
会继续使用旧的变量值进行计算，导致结果不正确。这被称为“陈旧闭包”（stale closure）。比如，你的计算函数里用到了
props.userId
，但你忘记把它放进依赖数组，那么即使
props.userId
变了，
useMemo
还是会用旧的
userId
进行计算。这是个隐蔽的bug，调试起来可能让人头疼。优化与正确性的平衡：依赖项数组帮助我们在这两者之间找到平衡。放少了，可能导致陈旧数据或错误；放多了，又可能频繁触发计算，失去记忆化的意义。所以，我的经验是，永远把计算函数内部用到的所有外部变量（props、state、其他hooks的返回值等）都列入依赖项数组。如果你发现列入所有依赖项后，
useMemo
还是频繁触发，那可能你需要重新思考组件结构，或者考虑是否真的需要
useMemo
。
正确管理依赖项，是写出健壮、高效React代码的基石之一。
useMemo
useMemo
与
useCallback
：它们有什么关系，何时选择哪个？
useMemo
和
useCallback
是React Hooks家族中一对非常亲密的“兄弟”，它们都服务于“记忆化”的核心思想，但侧重点不同。我经常看到开发者混淆它们，或者过度使用，这其实是没完全理解它们各自的适用场景。
useMemo
记忆的是一个“值”：它可以是任何数据类型，一个数字、一个字符串、一个对象、一个数组，甚至是一个函数（但通常我们不直接用
useMemo
去记忆函数，而是用
useCallback
）。它的目的是防止一个耗时的计算逻辑在不必要的时候重复执行，从而避免生成新的值引用。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);// 这里的memoizedValue 是 computeExpensiveValue 的返回结果
useCallback
记忆的是一个“函数”：它专门用来记忆一个函数定义本身。也就是说，它会返回一个记忆化的函数，只有当这个函数的依赖项发生变化时，才会返回一个新的函数引用。
const memoizedCallback = useCallback(() => { doSomething(a, b);}, [a, b]);// 这里的memoizedCallback 是一个函数
何时选择哪个？
我的经验是这样：
当你需要缓存一个“数据结果”时，用
useMemo
。比如，你有一个很大的数组需要过滤、排序后展示，或者需要从复杂数据结构中提取一个特定的对象。
const filteredAndSortedItems = useMemo(() => { // 假设这是一个耗时的操作 return items.filter(item => item.isActive).sort((a, b) => a.name.localeCompare(b.name));}, [items]);// 只有当 items 变化时，才重新计算 filteredAndSortedItems
当你需要缓存一个“函数定义”并将其作为
props
传递给子组件时，用
useCallback
。这在优化子组件（特别是那些使用了
React.memo
的子组件）的渲染性能时至关重要。如果父组件每次渲染都创建一个新的函数，即使子组件的逻辑没有变化，
React.memo
也会因为接收到新的函数引用而重新渲染子组件。
const handleClick = useCallback(() => { console.log('按钮被点击了'); // 依赖项为空，这个函数引用永远不会变}, []);// ...在JSX中
如果
MyButton
是一个
React.memo
优化的组件，那么
handleClick
的记忆化就显得尤为重要。
简而言之，
useMemo
是关于“计算结果”的缓存，而
useCallback
是关于“函数定义”的缓存。它们都是为了减少不必要的计算和渲染，但作用的粒度不同。理解这一点，能帮助你更精准地优化你的React应用，避免过度优化或优化不足的问题。
以上就是JS如何实现useMemo？记忆化的值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516561.html
微信扫一扫 
支付宝扫一扫 
