react如何提高性能
使用 React.memo 进行组件优化
React.memo 是一个高阶组件，用于缓存函数组件的渲染结果，避免不必要的重新渲染。当组件的 props 未变化时，直接复用上一次的渲染结果。适用于纯展示型组件或 props 变化较少的场景。
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]);避免内联函数和对象
内联函数或对象会导致每次渲染时生成新的引用，触发子组件的重新渲染。应尽量将函数或对象提升到组件外部或使用 useMemo/useCallback 缓存。
使用 React.lazy 和 Suspense 实现代码分割
通过动态导入（Dynamic Imports）拆分代码，按需加载组件，减少初始加载时间。适用于路由级或大型组件的懒加载。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}优化列表渲染
为列表项添加稳定的 key 属性，避免使用索引作为 key。对于长列表，使用虚拟滚动库（如 react-window 或 react-virtualized）减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}>Row {index}</div>;
function App() {
return <List height={150} itemCount={1000} itemSize={35} width={300}>{Row}</List>;
}减少不必要的 Context 更新
Context 的 value 变化会导致所有消费组件重新渲染。可通过拆分 Context 或使用 memo 优化子组件来减少影响。
const UserContext = React.createContext();
function App() {
const [user, setUser] = useState(null);
return <UserContext.Provider value={{ user, setUser }}>...</UserContext.Provider>;
}使用生产环境构建
开发环境下 React 包含额外的警告和检查，性能较差。部署时确保使用生产模式构建（如通过 npm run build 或设置 NODE_ENV=production）。
性能分析工具
使用 React DevTools 的 Profiler 或 Chrome 的 Performance 选项卡分析组件渲染时间，定位性能瓶颈。
// 在需要分析的组件外包裹 Profiler
<React.Profiler id="MyComponent" onRender={callback}>
<MyComponent />
</React.Profiler>
