一、useMemo 基本用法:
useMemo 是 React 提供的一个 Hook，用于性能优化，它通过"记忆"（memoization）计算结果来避免在每次渲染时进行不必要的复杂计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);主要作用:
避免重复计算：
当组件重新渲染时，useMemo 会检查依赖项数组中的值是否发生变化,只有当依赖项变化时，才会重新执行计算函数,否则直接返回之前缓存的值
2.
优化渲染性能：
对于计算量大的操作，使用 useMemo 可以显著提高性能,避免在每次渲染时都执行昂贵的计算
3.
保持引用稳定：
当返回对象或数组时，useMemo 可以保持引用不变（除非依赖项变化）,这对于传递给子组件的 props 特别有用，可以避免不必要的子组件重新渲染
使用场景:
1. 复杂计算
function ExpensiveComponent({ a, b }) {
const result = useMemo(() => {
// 复杂的计算过程
return a * b + Math.pow(a, b) - a / b;
}, [a, b]); // 只有当a或b变化时才重新计算
return <div>{result}</div>;
}2. 优化子组件渲染
function ParentComponent({ items }) {
const processedItems = useMemo(() => {
return items.map(item => ({
...item,
fullName: `${item.firstName} ${item.lastName}`
}));
}, [items]); // 只有当items变化时才重新处理
return <ChildComponent items={processedItems} />;
}3. 避免不必要的对象/数组创建
function FormComponent({ onSubmit }) {
const formConfig = useMemo(() => ({
initialValues: { username: '', password: '' },
validate: values => {
const errors = {};
if (!values.username) errors.username = 'Required';
return errors;
}
}), []); // 空依赖数组表示只创建一次
return <Form {...formConfig} onSubmit={onSubmit} />;
}注意事项:
不要滥用：
useMemo 本身也有性能开销,只对真正昂贵的计算或需要稳定引用的值使用
2.
依赖数组：
确保包含所有在计算函数中使用的外部值,遗漏依赖项会导致 bug
3.
不是语义保证：
React 可能在将来选择"忘记"某些记忆化的值,不要依赖 useMemo 来实现业务逻辑的正确性
4.
与 React.memo 的区别：
useMemo 记忆的是值,React.memo 记忆的是组件
二、useCallback 基本用法:
主要作用:
useCallback 是 React 提供的用于性能优化 的 Hook，它的主要作用是缓存函数引用，避免不必要的函数重新创建。
使用场景:
1. 当函数作为依赖项时
// 不使用 useCallback - 每次渲染都会创建新函数，导致 useEffect 重复执行
const fetchData = () => { /*...*/ };
useEffect(() => {
fetchData();
}, [fetchData]); // 依赖项每次都会变化
// 使用 useCallback - 只有依赖变化时才创建新函数
const fetchData = useCallback(() => {
/*...*/
}, [dependency]); // 只有当 dependency 变化时才重新创建函数2. 当函数作为 props 传递给优化过的子组件时
// 子组件用 React.memo 优化过
const Child = React.memo(({ onClick }) => {
/*...*/
});
function Parent() {
// 不使用 useCallback - 每次渲染都会导致 Child 重新渲染
const handleClick = () => { /*...*/ };
// 使用 useCallback - 避免 Child 不必要的重新渲染
const handleClick = useCallback(() => {
/*...*/
}, []); // 空依赖表示函数永不变化
return <Child onClick={handleClick} />;
}3. 在自定义 Hook 中返回稳定函数时
function useCounter() {
const [count, setCount] = useState(0);
// 返回稳定的函数引用
const increment = useCallback(() => setCount(c => c + 1), []);
const decrement = useCallback(() => setCount(c => c - 1), []);
return { count, increment, decrement };
}具体使用时机
-
函数被包含在依赖数组 （如
useEffect、useMemo、useCallback的依赖数组）中时 -
函数作为 prop 传递给用
React.memo优化的子组件时 -
函数被用作上下文值且会被多个组件使用时
-
函数被多次创建且创建成本较高时（虽然这种情况较少见）
不需要使用 useCallback 的情况
- 函数不参与任何依赖关系（没有作为 prop 传递，不在依赖数组中）
- 函数定义非常简单且创建成本极低
- 组件本身很少重新渲染时
三、useMemo与 **useCallback**的关系:
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)，两者都用于性能优化，但：
-
useMemo用于记忆计算结果 -
useCallback专门用于记忆函数// 这两个是等价的
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
const memoizedCallback = useMemo(() => () => doSomething(a, b), [a, b]);