react代码如何优化
使用 React.memo 进行组件优化
通过 React.memo 对函数组件进行记忆化，避免不必要的重新渲染。只有当组件的 props 发生变化时才会重新渲染。
const MyComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});使用 useCallback 和 useMemo 缓存函数和值
useCallback 缓存函数，避免函数在每次渲染时重新创建。useMemo 缓存计算结果，避免重复计算。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);减少不必要的状态更新
避免在 useState 或 useReducer 中更新相同的值，以减少组件的重新渲染。
const [state, setState] = useState(initialState);
// 避免不必要的更新
if (newState !== state) {
setState(newState);
}使用 React.lazy 和 Suspense 进行代码分割
通过动态导入（React.lazy）和 Suspense 实现按需加载组件，减少初始加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}优化列表渲染性能
在渲染长列表时，使用 key 属性提高 React 的 diff 算法效率，并考虑使用虚拟滚动库（如 react-window）。
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}避免内联函数和对象
内联函数和对象会导致每次渲染时创建新的引用，可能触发不必要的子组件更新。
// 避免内联函数
const handleClick = useCallback(() => {
// 处理逻辑
}, []);
// 避免内联对象
const config = useMemo(() => ({ size: 'large' }), []);使用生产环境构建
确保在部署时使用生产版本的 React，以启用性能优化（如代码压缩、去除开发模式警告）。
npm run build使用性能分析工具
通过 React DevTools 和 Profiler API 检测性能瓶颈，分析组件渲染时间。
import { Profiler } from 'react';
function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
) {
console.log('渲染时间:', actualDuration);
}
<Profiler id="MyComponent" onRender={onRenderCallback}>
<MyComponent />
</Profiler>
