react如何记忆
React 记忆技术
在 React 中，记忆（Memoization）是一种优化技术，用于避免不必要的重新渲染或计算。React 提供了多种内置方法和第三方库来实现记忆功能。
useMemo Hook
useMemo 用于记忆计算结果，避免在每次渲染时重复计算。它接受一个函数和一个依赖数组，仅当依赖项变化时重新计算。
import React, { useMemo } from 'react';
function ExpensiveComponent({ value }) {
const computedValue = useMemo(() => {
return value * 2; // 仅当 value 变化时重新计算
}, [value]);
return <div>{computedValue}</div>;
}React.memo
React.memo 是一个高阶组件，用于记忆组件的渲染结果。当组件的 props 未变化时，跳过重新渲染。
import React from 'react';
const MyComponent = React.memo(function MyComponent({ prop }) {
return <div>{prop}</div>;
});useCallback Hook
useCallback 用于记忆函数引用，避免在每次渲染时创建新的函数实例。常用于优化子组件的 props 传递。
import React, { useCallback } from 'react';
function ParentComponent() {
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []); // 空依赖数组表示函数不会变化
return <ChildComponent onClick={handleClick} />;
}自定义记忆函数
对于复杂场景，可以结合 Lodash 的 memoize 或其他库实现自定义记忆逻辑。
import memoize from 'lodash/memoize';
const memoizedFunction = memoize((param) => {
return expensiveCalculation(param);
});注意事项
记忆技术虽能提升性能，但滥用可能导致内存泄漏或代码复杂度增加。仅在性能瓶颈明确时使用，并合理设置依赖数组。
