react hooks学习系列，useMemo
最新回答
宇宙藏进你
2023-07-10 20:15:11
useMemo 是 React Hooks 中用于优化性能的重要工具，主要用于避免在每次渲染时都进行高开销的计算。
核心作用：useMemo 通过缓存计算结果，仅在依赖项发生变化时重新计算，从而减少不必要的重复计算，提升应用性能。
使用场景：当组件中存在复杂的计算逻辑（如大数据处理、复杂运算等）时，使用 useMemo 可以避免每次渲染都重新执行这些计算，特别是在依赖项未变化的情况下。
基本语法：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);其中，computeExpensiveValue 是耗时的计算函数，[a, b] 是依赖项数组。
工作原理：React 会在首次渲染时执行传入的函数并记住其返回值（memoizedValue）。在后续渲染中，只有当依赖项（如 a 或 b）发生变化时，才会重新计算；否则，直接返回缓存的值。
优势：
性能优化：避免重复计算，减少不必要的资源消耗。
稳定性：确保在依赖项未变化时，返回相同的引用，有助于减少子组件的不必要渲染（与 React.memo 配合使用效果更佳）。
注意事项：
依赖项准确性：必须正确指定所有影响计算结果的依赖项，否则可能导致计算结果不更新。
过度使用：仅在确实存在性能问题时使用，避免过早优化。
与 useCallback 的区别：useMemo 缓存的是值，而 useCallback 缓存的是函数。
示例：
import React, { useMemo } from 'react';function ExpensiveComponent({ list }) { const sortedList = useMemo(() => { return [...list].sort((a, b) => a - b); }, [list]); return ( <div> {sortedList.map(item => ( <div key={item}>{item}</div> ))} </div> );}在此示例中，sortedList 仅在 list 发生变化时重新计算，否则直接使用缓存结果。
总结：useMemo 是 React 性能优化的有力工具，通过合理使用可以显著减少不必要的计算，提升应用响应速度。但需注意正确指定依赖项，避免滥用。
热门标签
