react如何提高渲染性能
使用 React.memo 进行组件记忆化
React.memo 是一个高阶组件，用于包装函数组件以避免不必要的重新渲染。当组件的 props 没有变化时，React.memo 会跳过渲染过程，直接复用上一次的渲染结果。这对于纯展示型组件特别有效。
const MyComponent = React.memo(function MyComponent(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 等库实现虚拟滚动。这些库只会渲染当前视窗内的元素，大幅减少 DOM 节点数量。
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>
);避免在渲染中使用内联函数和对象
在渲染方法中直接创建函数或对象会导致每次渲染都生成新的引用，触发子组件的重新渲染。应该将这些值提升到组件外部或使用 useMemo/useCallback 进行优化。
使用生产环境构建
开发环境的 React 包含大量警告和检查，性能较差。确保部署时使用生产环境构建，可以通过 Webpack 的 mode: 'production' 或设置 NODE_ENV=production 环境变量来实现。
代码分割和懒加载
使用 React.lazy 和 Suspense 实现组件的动态导入和懒加载，减少初始加载的代码量。配合 Webpack 等打包工具可以实现按需加载。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}优化状态管理
避免将不必要的数据放入全局状态，合理划分状态的作用域。对于局部状态优先使用 useState，对于需要跨组件共享的状态才考虑使用 useContext 或 Redux 等状态管理库。
使用不可变数据
在处理复杂状态时，使用不可变数据可以更高效地进行浅比较，帮助 React 快速确定是否需要重新渲染。可以使用 Immer 等库简化不可变数据的操作。
避免不必要的 DOM 更新
使用 shouldComponentUpdate 或 PureComponent 进行手动优化，防止组件因父组件更新而触发不必要的渲染。对于函数组件，React.memo 已经提供了类似功能。
使用 React DevTools 分析性能
React DevTools 提供了 Profiler 工具，可以记录组件的渲染时间，帮助识别性能瓶颈。通过分析火焰图可以找到需要优化的组件。
