react如何提高渲染性能
使用React.memo进行组件记忆
将函数组件包裹在React.memo中，避免不必要的重新渲染。它会对props进行浅比较，仅当props变化时重新渲染组件。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});避免内联函数和对象
内联函数或对象会导致每次渲染时生成新的引用，触发子组件不必要的更新。改用useCallback和useMemo缓存函数和计算结果。
const handleClick = useCallback(() => {
// 事件逻辑
}, [dependencies]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);优化列表渲染
为列表项添加唯一的key属性，避免使用索引作为key。长列表使用虚拟滚动库（如react-window）减少DOM节点数量。
import { FixedSizeList } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<FixedSizeList height={150} itemSize={35} itemCount={1000}>
{Row}
</FixedSizeList>减少状态更新范围
将状态拆分为更小的粒度，避免大状态对象导致整个组件树更新。优先使用局部状态而非全局状态管理。
const [localState, setLocalState] = useState(initialValue);使用生产模式构建
生产环境启用React的优化（如代码压缩、删除开发模式警告）。通过构建工具（如Webpack）设置NODE_ENV=production。
webpack --mode production延迟加载组件
通过React.lazy和Suspense实现按需加载，减少初始渲染负载。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>使用不可变数据
避免直接修改状态，使用不可变数据库（如immer）或展开运算符减少深层比较的开销。
setState(prevState => ({
...prevState,
updatedField: newValue
}));避免不必要的Context更新
将Context拆分为多个独立上下文，或使用useMemo优化传递给Provider的值。
const value = useMemo(() => ({ theme, user }), [theme, user]);
<MyContext.Provider value={value}>
{children}
</MyContext.Provider>使用性能分析工具
通过React DevTools的“Profiler”选项卡识别性能瓶颈，分析组件渲染时间和原因。
服务端渲染（SSR）优化
对于复杂应用，结合Next.js等框架实现SSR，提升首屏加载速度，注意避免同步渲染阻塞。
