react如何缓存节点

缓存组件的方法

使用 React.memo 高阶组件包裹函数组件，可以避免不必要的重新渲染。它会对组件的 props 进行浅比较，仅在 props 变化时重新渲染。

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 渲染逻辑 */
});

使用 useMemo 缓存计算结果

useMemo 可以缓存计算结果，仅在依赖项变化时重新计算。适用于需要复杂计算的渲染内容。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

使用 useCallback 缓存事件处理函数

useCallback 可以缓存函数实例，避免子组件因函数引用变化而重新渲染。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

通过 key 属性控制节点复用

为列表项或需要复用的组件设置稳定的 key 值，可以帮助 React 识别哪些节点可以复用。

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}

使用 Context 配合 memo

当使用 Context 时，配合 React.memo 可以避免因 Context 值变化导致的不必要渲染。

const MyComponent = React.memo(() => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
});

第三方缓存解决方案

对于更复杂的缓存需求，可以考虑以下库：

• react-query：管理服务器状态和缓存
• swr：数据获取和缓存策略
• reselect：创建可记忆的选择器

避免过度缓存

缓存会增加内存使用量，并可能引入陈旧数据问题。应该只在性能确实需要优化时使用缓存，并确保缓存策略不会影响应用正确性。