react 的性能优化
React 的性能优化可以分为多个方面，包括组件渲染优化、数据管理优化、网络优化以及工具和最佳实践的使用。以下是详细的性能优化方案：
一、渲染优化
1. 避免不必要的重新渲染
React.memo
对组件进行浅比较，防止组件在父组件重新渲染时无意义的重新渲染。
const ChildComponent = React.memo(({
data }) => {
console.log("Child Rendered");
return <div>{
data}</div>;
});
useCallback
缓存函数引用，避免因函数重新创建导致子组件不必要的渲染。
const handleClick = useCallback(() => {
console.log("Clicked");
}, []);
useMemo
缓存计算结果，避免重复执行耗时的计算。
const computedValue = useMemo(() => {
return heavyComputation(input);
}, [input]);
2. 分离状态管理
将状态提升到离它最近的公共父组件，减少状态的传播范围。
将无关的状态移动到不影响频繁渲染的组件中。
3. 列表优化
虚拟列表
使用 react-window 或 react-virtualized 渲染长列表。
import {
FixedSizeList as List } from 'react-window';
const MyList = ({
items }) => (
<List height={
500} itemCount=