react如何记忆

状态管理（State Management）

React 的核心记忆机制是通过状态（State）和属性（Props）实现数据存储与传递。使用 useState 或 useReducer 管理组件内部状态，状态变化触发组件重新渲染。

const [count, setCount] = useState(0); // 记忆当前计数值

记忆化计算（Memoization）

通过 useMemo 缓存计算结果，避免重复计算。适用于依赖项未变化时的复杂运算。

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

回调函数记忆（Callback Memoization）

使用 useCallback 缓存函数引用，避免子组件因回调函数重新创建而无效渲染。

const handleClick = useCallback(() => {
  console.log('Clicked:', count);
}, [count]);

组件记忆（Component Memoization）

通过 React.memo 包裹组件，在属性未变化时跳过渲染。适用于纯展示型组件。

const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

上下文记忆（Context Memoization）

结合 useContext 和 useMemo 避免上下文值变化导致的全局渲染。

const user = useMemo(() => ({ name: 'Alice' }), []);
<UserContext.Provider value={user}>...</UserContext.Provider>

外部存储（External Storage）

通过 useRef 存储可变值（不触发渲染），或配合 localStorage/sessionStorage 持久化数据。

const intervalRef = useRef(null);
intervalRef.current = setInterval(() => {}, 1000);

第三方库增强

使用如 Redux、Zustand 或 Recoil 管理全局状态，或通过 SWR/React Query 缓存异步数据。

const { data } = useSWR('/api/data', fetcher); // 自动缓存请求结果