react优化，就这，我也要沾边📚React 性能优化是一个系统工程， 📚需要从多个维度进行考虑和实践。 📚改文是

React 性能优化是一个系统工程，需要从多个维度进行考虑和实践。

以下是我整理的 React 性能优化完整指南：

一、 📕 核心优化原则

减少不必要的渲染：React 的核心优化目标就是减少不必要的组件渲染
缩短更新链路：使更新过程尽可能高效地完成
合理分配计算资源：将计算放在合适的时机和位置

二、 📕 具体优化策略

1. 📚 组件渲染控制

React.memo：用于函数组件，类似于 PureComponent

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

shouldComponentUpdate：类组件中的生命周期方法

shouldComponentUpdate(nextProps, nextState) {
  // 自定义比较逻辑
}

PureComponent：类组件的浅比较优化

class MyComponent extends React.PureComponent {}

2. 📚 状态管理优化

合并状态更新：

// 不好的做法
setState({ a: 1 });
setState({ b: 2 });

// 好的做法
setState({ a: 1, b: 2 });

函数式更新：当新状态依赖旧状态时

setState(prevState => ({ count: prevState.count + 1 }));

避免中间状态：对于多个异步请求，等待所有完成后再更新状态

3. 📚 引用稳定性

useCallback：缓存回调函数

const handleClick = useCallback(() => {
  // 处理点击
}, [dependency]);

useMemo：缓存计算结果

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

避免内联对象/函数：

// 不好的做法 - 每次渲染都会创建新对象
<Child style={{ color: 'red' }} />

// 好的做法
const childStyle = useMemo(() => ({ color: 'red' }), []);
<Child style={childStyle} />

4. 📚 列表渲染优化

key 属性：使用稳定、唯一的 key

{items.map(item => (
  <li key={item.id}>{item.text}</li>
))}

虚拟列表：对于长列表使用 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>
);

5. 📚 Context 优化

拆分 Context：按功能拆分多个 Context

Memo 化 Provider value：

const MyProvider = ({ children }) => {
  const [state, setState] = useState(initialState);
  const value = useMemo(() => [state, setState], [state]);
  
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

6. 📚 代码分割与懒加载

React.lazy：组件级懒加载

const OtherComponent = React.lazy(() => import('./OtherComponent'));

动态 import：路由级懒加载

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

7. 📚 其他优化技巧

防抖/节流：高频事件处理

const handleResize = useDebounce(() => {
  // 处理resize
}, 200);

Web Workers：将复杂计算移出主线程
useReducer：复杂状态逻辑
避免在渲染中做复杂计算：将计算移到 useEffect 或 useMemo 中

三、 📕 性能分析工具

React DevTools Profiler：分析组件渲染性能
Chrome Performance Tab：整体性能分析

why-did-you-render：检测不必要的渲染

import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React);

React.memo 或 PureComponent 的 console.log：手动检测渲染

四、 📕 优化实践案例

案例1： 📚 大型表单优化

const FormContainer = React.memo(({ fields }) => {
  const [formData, setFormData] = useState({});
  
  // 使用useCallback缓存回调
  const handleChange = useCallback((fieldName, value) => {
    setFormData(prev => {
      if (prev[fieldName] === value) return prev;
      return { ...prev, [fieldName]: value };
    });
  }, []);

  return (
    <form>
      {fields.map(field => (
        <FormField 
          key={field.name}
          field={field}
          value={formData[field.name]}
          onChange={handleChange}
        />
      ))}
    </form>
  );
});

// 优化后的FormField组件
const FormField = React.memo(({ field, value, onChange }) => {
  const handleFieldChange = useCallback((e) => {
    onChange(field.name, e.target.value);
  }, [field.name, onChange]);

  return (
    <div className="form-field">
      <label>{field.label}</label>
      <input 
        type={field.type}
        value={value || ''}
        onChange={handleFieldChange}
      />
    </div>
  );
});

案例2： 📚 复杂数据展示优化

const DataGrid = ({ data }) => {
  // 使用useMemo缓存处理后的数据
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      calculatedValue: expensiveCalculation(item),
    }));
  }, [data]);

  // 使用虚拟列表渲染
  return (
    <List
      height={500}
      itemCount={processedData.length}
      itemSize={50}
      width={800}
    >
      {({ index, style }) => (
        <Row 
          style={style}
          data={processedData[index]}
        />
      )}
    </List>
  );
};

// 使用React.memo优化行组件
const Row = React.memo(({ data, style }) => {
  return (
    <div style={style}>
      {/* 行内容 */}
    </div>
  );
});

五、 📕 性能优化检查清单

通过系统性地应用这些优化策略，可以显著提升 React 应用的性能表现，特别是在复杂组件和大型应用中。

记住，优化是一个持续的过程，需要结合具体场景和性能分析工具来不断调整和改进。