如何提升react的运行效率
使用React.memo进行组件记忆化
将函数组件包裹在React.memo中，避免不必要的重新渲染。只有当组件的props发生变化时才会重新渲染。
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});使用useCallback和useMemo缓存函数和值
useCallback用于缓存函数，避免在每次渲染时重新创建函数。useMemo用于缓存计算结果，避免重复计算。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);避免内联函数和对象
在渲染方法中避免直接创建内联函数或对象，因为它们会导致子组件不必要的重新渲染。
// 避免
<MyComponent onClick={() => handleClick()} />
// 推荐
const handleClick = useCallback(() => {
/* 逻辑 */
}, []);
<MyComponent onClick={handleClick} />使用React.lazy和Suspense实现代码分割
通过动态导入组件减少初始加载时间，提升运行时性能。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}优化列表渲染使用key
为列表项提供唯一的key属性，帮助React识别哪些项发生了变化，减少不必要的DOM操作。
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}避免不必要的状态更新
确保setState或useState的更新不会触发不必要的渲染，可以通过条件判断避免。
const [state, setState] = useState(initialState);
// 避免不必要的更新
if (newState !== state) {
setState(newState);
}使用生产模式构建
确保在生产环境中使用React的生产版本，避免开发模式的额外检查开销。
npm run build使用性能分析工具
借助React DevTools和Chrome Performance工具分析组件渲染时间，定位性能瓶颈。
减少Context的更新频率
将Context拆分为多个小范围Context，避免大范围Context更新导致所有消费者重新渲染。
const UserContext = React.createContext();
const ThemeContext = React.createContext();
// 拆分Context减少更新影响
<UserContext.Provider value={user}>
<ThemeContext.Provider value={theme}>
<App />
</ThemeContext.Provider>
</UserContext.Provider>虚拟化长列表
使用react-window或react-virtualized库虚拟化长列表，仅渲染可见部分内容。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
