react 的相关优化

优化React应用的性能涉及多个方面，包括组件的渲染、状态管理、数据获取、代码分割和懒加载等。以下是一些具体的优化策略：

1. 优化组件渲染

1.1 使用React.memo（函数组件）和shouldComponentUpdate（类组件）：

React.memo是一个高阶组件，用于在输入（props）不变时跳过渲染。
高阶函数就是接受一个组件作为参数，返回一个新组件。
shouldComponentUpdate方法允许你控制组件是否应该重新渲染。

import React, { memo } from 'react';

const MyComponent = (props) => {
  // 组件的渲染逻辑
  return <div>{props.value}</div>;
};

// 使用 React.memo 包装组件
const MemoizedMyComponent = memo(MyComponent);

// 现在使用 MemoizedMyComponent 而不是 MyComponent

1.2避免不必要的重新渲染：

确保只在必要时更新状态。
使用useCallback和useMemo来缓存函数和计算结果，避免在每次渲染时都重新计算。

import React, { useMemo, useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  // 使用useMemo缓存计算结果
  const computedValue = useMemo(() => {
    console.log('Computing expensive value...');
    return count * 2; // 假设这是一个昂贵的计算
  }, [count]); // 依赖项数组，只有count变化时才会重新计算

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Computed Value: {computedValue}</p>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
};

// 也可以缓存父组件传的回调函数，这样在父组件渲染时 子组件内如果props没有变化不会重新渲染
import React, { useCallback, useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  // 使用useCallback缓存函数
  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 依赖项数组，只有count变化时才会重新创建函数

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

1.3优化列表渲染：

使用key属性来帮助React识别哪些列表项是新的、哪些是被移动的，以及哪些是被删除的。
加入key以后，在前后虚拟dom进行对比会更加迅速的找到对应项。
对于大型列表，考虑使用分页或虚拟滚动来减少一次性渲染的项数。

2. 优化状态管理

2.1使用合适的状态管理库：

对于小型应用，React的状态管理通常足够。
对于大型应用，考虑使用Redux、MobX或其他状态管理库来更有效地管理状态。

2.2提升状态：

将状态提升到最近的公共父组件，以减少不必要的状态传递和更新。
具体实现
注意的细节就是在父组件中是需要写入子孙组件才能进行传递

// 共同祖先组件
function AncestorComponent() {
  //要传递的数据
  const [sharedState, setSharedState] = useState('initial state');

  // 更新函数，供子组件调用
  const updateSharedState = (newState) => {
    setSharedState(newState);
  };

  return (
    <div>
      <h1>共同祖先组件</h1>
      <p>共享状态：{sharedState}</p>
      {/* 将状态和更新函数传递给子组件 */}
      <ChildComponent1 sharedState={sharedState} updateSharedState={updateSharedState} />
      <ChildComponent2 sharedState={sharedState} updateSharedState={updateSharedState} />
    </div>
  );
}

// 子组件1
function ChildComponent1({ sharedState, updateSharedState }) {
  return (
    <div>
      <h2>子组件1</h2>
      <button onClick={() => updateSharedState('state from Child1')}>更新状态（来自Child1）</button>
    </div>
  );
}

// 子组件2
function ChildComponent2({ sharedState, updateSharedState }) {
  return (
    <div>
      <h2>子组件2</h2>
      <button onClick={() => updateSharedState('state from Child2')}>更新状态（来自Child2）</button>
    </div>
  );
}

2.3使用Context API：

跨组件传递，通过props将状态或数据从一个组件传递到另一个组件。
和状态提升有些相似，状态提升是一种模式，更多注重的是多子组件共享数据，
而跨组件传递重点是组件间的传递。并且不一定非得是父子关系。

3. 优化数据获取

3.1使用异步数据获取：

使用useEffect与异步函数（如fetch）结合来获取数据。
考虑使用数据获取库（如Axios、React Query）来简化数据获取和缓存。

3.2缓存数据：

在可能的情况下缓存数据，以减少不必要的网络请求。

4. 代码分割和懒加载

4.1代码分割：

使用React的lazy和Suspense特性来按需加载组件。
使用动态导入（import()）来分割代码。

3.1懒加载：

延迟加载不常用的组件或数据，以减少初始加载时间。

5. 其他优化策略

避免内联函数和对象：

在渲染方法中避免创建内联函数或对象，因为它们会在每次渲染时都重新创建。

使用服务端渲染（SSR）：

对于需要快速首屏渲染的应用，考虑使用服务端渲染。

使用性能分析工具：

使用React DevTools Profiler、Chrome DevTools或其他性能分析工具来识别性能瓶颈。

优化图片和资源：

压缩图片和资源文件。
使用合适的图片格式（如WebP）。
使用CDN来加速资源的加载。

通过优化策略，你可以提高React应用的性能，为用户提供更流畅、更快速的体验。