react如何让函数组件缓存
缓存函数组件的常用方法
在React中，函数组件本身是无状态的，但可以通过以下方式实现类似类组件的缓存或优化效果：
使用React.memo进行浅比较缓存
React.memo是一个高阶组件，它会记忆上次渲染结果，在props未变化时直接复用：
const MyComponent = React.memo(function MyComponent(props) {
/* 使用props渲染 */
});默认进行浅比较，也可自定义比较函数：
React.memo(MyComponent, (prevProps, nextProps) => {
return prevProps.value === nextProps.value;
});使用useMemo缓存计算结果
对于组件内部的复杂计算，可用useMemo缓存：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);使用useCallback缓存事件处理函数
避免因函数引用变化导致子组件不必要的重渲染：
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);结合useReducer管理复杂状态
当状态逻辑复杂时，useReducer比useState更适合状态管理：
const [state, dispatch] = useReducer(reducer, initialArg, init);使用自定义Hook封装逻辑
将可复用的逻辑提取到自定义Hook中：
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
// 逻辑代码...
return isOnline;
}注意事项
- 过度优化可能导致反效果，应先确认性能瓶颈
- React.memo只进行浅比较，深层对象变化仍需配合useCallback/useMemo
- 类组件的shouldComponentUpdate提供更精细控制，函数组件中可用React.memo替代
这些方法可单独或组合使用，根据实际场景选择最合适的缓存策略。
