react如何实现性能优化
使用 React.memo 避免不必要的重新渲染
对于函数组件，可以使用 React.memo 进行包裹，它会浅比较 props 的变化。只有当 props 真正改变时才会重新渲染组件。这对于展示型组件特别有效。
const MyComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});合理使用 useMemo 和 useCallback
useMemo 可以缓存计算结果，避免每次渲染都重新计算。useCallback 可以缓存函数引用，避免子组件因函数引用变化而重新渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);虚拟化长列表
对于渲染长列表的场景，使用虚拟滚动技术只渲染可视区域内的元素。推荐使用 react-window 或 react-virtualized 库。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Example = () => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);代码分割和懒加载
使用 React.lazy 和 Suspense 实现组件级别的代码分割，减少初始加载的代码量。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}避免内联函数和对象
在渲染方法中避免直接创建函数和对象，因为它们会导致子组件不必要地重新渲染。应该将函数和对象提升到组件外部或使用 useCallback/useMemo。
使用生产环境构建
确保部署时使用 React 的生产环境构建版本，它经过了优化并移除了开发环境的警告信息。可以通过 Webpack 的 mode: 'production' 或设置 NODE_ENV=production 环境变量来实现。
优化 Context 使用
当 Context 值变化时，所有消费该 Context 的组件都会重新渲染。可以通过拆分 Context 或将不常变化的值与频繁变化的值分开来减少不必要的渲染。
使用不可变数据
使用不可变数据可以帮助 React 更高效地判断数据是否发生变化。可以使用 Immer 等库来简化不可变数据操作。
import produce from 'immer';
const nextState = produce(currentState, draft => {
draft.pages.push('new page');
});性能分析工具
使用 React DevTools 的 Profiler 功能分析组件渲染性能，识别不必要的渲染。Chrome 的 Performance 工具也可以帮助分析整体性能瓶颈。
避免在渲染中执行高开销操作
将数据获取、订阅或高开销计算移出渲染方法，使用 useEffect 来处理副作用，或者将这些操作放在事件处理函数中。
