react如何记忆
React 的记忆机制
React 提供了多种方式帮助优化组件渲染性能，避免不必要的重复计算或渲染。以下是常见的记忆化技术：
useMemo Hook
用于记忆计算结果，避免重复执行昂贵计算。适用于非渲染相关的计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback Hook
用于记忆函数引用，避免子组件因父组件重新渲染导致的不必要重渲染。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);React.memo 高阶组件
对函数组件进行浅比较，避免 props 未变化时的重新渲染。
const MyComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});记忆化原理
React 的记忆化基于依赖项数组（deps）的浅比较（Object.is）。当依赖项未变化时，返回缓存值；依赖项变化时重新计算并更新缓存。
浅比较规则
- 原始类型：比较值是否相同
- 引用类型：比较引用地址是否相同
- 特殊值：NaN 与 NaN 视为相同
使用场景
适合记忆化的情况
- 计算成本高的派生数据
- 作为其他 Hook 的依赖项
- 传递给子组件的函数或复杂对象
- 大型列表中的子组件渲染
不宜记忆化的情况
- 简单计算或原始值
- 频繁变化的依赖项
- 副作用操作（应使用 useEffect）
注意事项
- 过度使用记忆化可能导致内存压力
- 确保依赖项完整，避免过时闭包
- 在自定义 Hook 中返回稳定引用时特别有用
- 对于类组件，可使用 shouldComponentUpdate 或 PureComponent 实现类似效果
