react代码如何优化
减少不必要的重新渲染
使用 React.memo 或 useMemo 缓存组件或计算结果，避免因父组件状态变化导致的子组件无效渲染。对于类组件，可以通过 shouldComponentUpdate 进行手动控制。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 仅当 props 变化时重新渲染
});合理拆分组件
将大型组件拆分为更小的、功能单一的组件。这不仅能提高可维护性，还能通过隔离状态变化减少渲染范围。例如表单字段可拆分为独立组件，避免整个表单因单个字段变化而重新渲染。
优化状态管理
避免将不相关的状态放在同一 useState 中。使用多个独立的状态变量或 useReducer 管理复杂状态逻辑。对于全局状态，考虑使用 Context API 或状态管理库（如 Redux），但需注意避免过度使用导致性能下降。
// 不佳实践：合并不相关状态
const [state, setState] = useState({ count: 0, theme: 'dark' });
// 优化：拆分独立状态
const [count, setCount] = useState(0);
const [theme, setTheme] = useState('dark');使用代码分割
通过动态导入（React.lazy 和 Suspense）实现路由级或组件级的代码分割，减少初始加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}避免内联函数
在函数组件中，避免在渲染时创建内联函数或对象，这会导致子组件不必要的重新渲染。使用 useCallback 缓存事件处理函数，用 useMemo 缓存计算结果。
const handleClick = useCallback(() => {
// 处理点击事件
}, [dependencies]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);虚拟化长列表
对于渲染大量数据的列表（如表格、聊天记录），使用虚拟滚动技术（如 react-window 或 react-virtualized）只渲染可视区域内的元素。
import { FixedSizeList as List } from 'react-window';
function MyList({ data }) {
return (
<List
height={500}
itemCount={data.length}
itemSize={35}
width={300}
>
{({ index, style }) => (
<div style={style}>Row {data[index]}</div>
)}
</List>
);
}使用生产模式构建
确保部署时使用生产环境构建，React 会移除开发模式的警告和检查，并启用性能优化。通过 Webpack 等工具配置 process.env.NODE_ENV === 'production' 来实现。
性能监控与分析
使用 React DevTools 的 Profiler 功能分析组件渲染时间和频率。Chrome 的 Performance 工具也可帮助识别性能瓶颈。对于线上监控，考虑使用 Lighthouse 或自定义性能指标。
