react缓存如何解决
React 缓存解决方案
使用 React.memo 缓存组件
React.memo 是一个高阶组件，用于缓存函数组件的渲染结果。当组件的 props 未发生变化时，直接返回上一次的渲染结果。
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});使用 useMemo 缓存计算结果
useMemo 用于缓存计算结果，避免在每次渲染时重新计算。适用于复杂计算或依赖项未变化的情况。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);使用 useCallback 缓存函数
useCallback 用于缓存函数引用，避免在每次渲染时创建新的函数。适用于将函数作为 props 传递给子组件的情况。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);使用 useRef 缓存可变值
useRef 可以缓存可变值，且不会触发重新渲染。适用于存储不需要触发渲染的变量。
const ref = useRef(initialValue);
ref.current = newValue;使用 Context 和状态管理库
通过状态管理库（如 Redux、MobX）或 React Context 缓存全局状态，避免不必要的状态传递和重复计算。
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}使用第三方缓存库
第三方库如 swr 或 react-query 可以高效地缓存数据请求，减少重复请求。
import useSWR from 'swr';
function Profile() {
const { data, error } = useSWR('/api/user', fetcher);
if (error) return <div>failed to load</div>;
if (!data) return <div>loading...</div>;
return <div>hello {data.name}!</div>;
}优化列表渲染
对于列表渲染，使用 key 属性和虚拟滚动（如 react-window）减少不必要的 DOM 操作。
import { FixedSizeList as List } from 'react-window';
function MyList() {
return (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{({ index, style }) => <div style={style}>Item {index}</div>}
</List>
);
}避免内联对象和函数
内联对象和函数会导致子组件不必要的重新渲染，应尽量避免。
// 不推荐
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />
// 推荐
const style = useMemo(() => ({ color: 'red' }), []);
const onClick = useCallback(() => {}, []);
<ChildComponent style={style} onClick={onClick} />
