react如何踩开
React 性能优化方法
使用 React.memo 进行组件记忆
React.memo 是一个高阶组件，用于缓存函数组件的渲染结果。当组件的 props 没有变化时，React 会复用上一次的渲染结果，避免不必要的重新渲染。
const MyComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});使用 useCallback 和 useMemo 缓存函数和值
useCallback 用于缓存函数，避免每次渲染都创建新的函数实例。useMemo 用于缓存计算结果，避免重复计算。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);避免不必要的状态更新
确保状态更新是必要的，避免在渲染过程中频繁触发状态更新。可以使用 shouldComponentUpdate 或 React.memo 来控制组件的更新。
使用虚拟化长列表
对于长列表渲染，使用 react-window 或 react-virtualized 等库进行虚拟化，只渲染可见区域的内容。
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>
);优化 Context 使用
避免在 Context 中传递频繁变化的值，可以将 Context 拆分为多个更小的 Context，减少不必要的订阅更新。
使用生产环境构建
确保在生产环境中使用 React 的生产版本，开发版本的 React 包含额外的警告和检查，会影响性能。
使用代码分割
通过 React.lazy 和 Suspense 实现代码分割，按需加载组件，减少初始加载时间。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}常见性能问题排查工具
React DevTools Profiler
使用 React DevTools 的 Profiler 工具分析组件的渲染时间和性能瓶颈。
Chrome Performance Tab
通过 Chrome 的性能面板记录页面运行情况，分析 JavaScript 执行时间和渲染性能。
why-did-you-render
使用 why-did-you-render 库检测不必要的组件重新渲染。
npm install @welldone-software/why-did-you-render --save-devimport React from 'react';
if (process.env.NODE_ENV !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}减少重绘和回流
避免内联样式
内联样式会导致浏览器频繁计算样式，增加重绘和回流的开销。尽量使用 CSS 类名。
使用 CSS Transform 替代 top/left
CSS Transform 不会触发回流，性能更好。对于动画效果，优先使用 transform 和 opacity。
.box {
transform: translateX(100px);
}批量 DOM 操作
使用 React 的批量更新机制，避免频繁操作 DOM。在 React 18 中，自动批处理已经默认启用。
