React性能优化

1. 减少不必要的重新渲染

• 使用React.memo
  对于函数组件，使用React.memo避免不必要的重新渲染。

  const MyComponent = React.memo(({ prop }) => {
      return <div>{prop}</div>;
  });
  

• 使用shouldComponentUpdate或PureComponent
  对于类组件，继承PureComponent或手动实现shouldComponentUpdate以控制更新逻辑。

---

2. 优化状态管理

• 细粒度状态分割
  将状态分散到需要它的最低层级组件中，避免顶层状态变化导致大面积重新渲染。

• 使用useReducer和useContext
  替代复杂的useState，减少父组件重新渲染对子组件的影响。

---

3. 懒加载与代码分割

• 动态导入组件
  使用React.lazy和Suspense实现按需加载。

  const MyComponent = React.lazy(() => import('./MyComponent'));
  
  function App() {
      return (
          <React.Suspense fallback={<div>Loading...</div>}>
              <MyComponent />
          </React.Suspense>
      );
  }
  

---

4. 虚拟化长列表

• 使用react-window或react-virtualized
  对于大数据量列表，通过虚拟化技术只渲染可见部分，提升性能。

---

5. 事件处理优化

• 事件委托
  在父级元素上绑定事件，通过事件冒泡机制处理子元素事件，减少事件处理器的数量。

• 清理未使用的事件监听器
  在组件卸载时移除事件监听器，防止内存泄漏。

  useEffect(() => {
      window.addEventListener('resize', handleResize);
      return () => {
          window.removeEventListener('resize', handleResize);
      };
  }, []);