react代码如何优化
优化 React 代码的方法
使用 React.memo 和 useMemo 减少不必要的渲染
React.memo 用于优化函数组件的渲染，避免在 props 未变化时重新渲染。useMemo 用于缓存计算结果，避免重复计算。
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});
const expensiveCalculation = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);合理拆分组件
将大型组件拆分为更小、更专注的组件，提升可维护性和性能。每个组件应只关注单一职责。
function UserProfile({ user }) {
return (
<div>
<UserAvatar avatar={user.avatar} />
<UserDetails details={user.details} />
</div>
);
}使用 useCallback 避免函数重新创建
useCallback 用于缓存函数，避免在每次渲染时重新创建，特别适用于将函数作为 props 传递给子组件的情况。
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);优化状态管理
避免在状态中存储冗余数据，合理使用 useState 或 useReducer。对于复杂状态逻辑，useReducer 比多个 useState 更合适。
const [state, dispatch] = useReducer(reducer, initialState);使用懒加载（Lazy Loading）
通过 React.lazy 和 Suspense 实现组件懒加载，减少初始加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}避免内联函数和对象
内联函数和对象会导致子组件不必要的重新渲染。尽量将函数和对象提取到组件外部或使用 useCallback 和 useMemo。
// 避免
<div onClick={() => console.log('click')} />
// 推荐
const handleClick = () => console.log('click');
<div onClick={handleClick} />使用性能分析工具
利用 React DevTools 和 Chrome 的性能分析工具检测性能瓶颈。重点关注不必要的渲染和高耗时操作。
// 使用 React Profiler 分析组件性能
<Profiler id="MyComponent" onRender={onRenderCallback}>
<MyComponent />
</Profiler>优化列表渲染
对于长列表，使用 react-window 或 react-virtualized 实现虚拟滚动，减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
function MyList() {
return (
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);
}减少 useEffect 的依赖项
useEffect 的依赖项过多会导致频繁触发。确保依赖项仅包含必要的变量，或拆分多个 useEffect。
useEffect(() => {
// 仅当 id 变化时执行
fetchData(id);
}, [id]);使用生产环境构建
生产环境构建会自动启用 React 的性能优化，如代码压缩和删除开发模式下的警告。
npm run build使用代码分割
通过动态 import() 实现代码分割，减少初始包体积。
const OtherComponent = React.lazy(() => import('./OtherComponent'));避免滥用 Context
Context 的频繁更新会导致所有消费者重新渲染。对于频繁变化的数据，考虑使用状态管理库如 Redux 或 Zustand。
const MyContext = React.createContext();通过以上方法，可以显著提升 React 应用的性能和可维护性。根据具体场景选择合适的优化策略。
