React 优化干货分享，细节决定成败！

一、使用React.memo

对于纯组件(Pure Components)， 使用 React.memo 包装，防止不必要的重染。

import React, { useState, memo } from "react";

// 定义一个纯组件
const ChildComponent = ({ value }) => {
  console.log("ChildComponent rendered");
  return <div>子组件的值: {value}</div>;
};

// 使用 React.memo 包装纯组件
const MemoizedChildComponent = memo(ChildComponent);

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const increment = () => setCount(count + 1);

  return (
    <div>
      <h1>React.memo 示例</h1>
      <button onClick={increment}>增加计数器: {count}</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="输入一些文字"
      />
      {/* 使用 MemoizedChildComponent 代替普通组件 */}
      <MemoizedChildComponent value={count} />
    </div>
  );
};

export default App;

二、使用useCallback和useMemo

1、useCallback用于缓存函数使用，避免子组件因为传入函数变化而重新渲染

2、useMemo 用于缓存计算结果，避免每次渲染时都重新计算。 示例：

const memoizedcallback=useCallback(()=>{
dosomething(a,b);
},[a, b]);
const memoizedValue = useMemo(()=>computeExpensiveValue(a, b),[a, b]);

三、拆分组件

将大组件拆分为更小的可复用组件，提高代码可读性和性能(通过减少不必 要的重渲染)

四、避免匿名函数和对象

在 JSX 中避免使用匿名函数和对象，因为每次渲染都会创建新的实例。 示例:

// 不推荐
<MyComponent onClick={()=>handleclick()} style={{ color:'red' }} />

// 推荐
const handleClick=usecallback(()=>{
// 点击处理逻辑
}，[]);
const style ={color:'red'};

<MyComponent onclick={handleclick} style={style}/>

五、优化列表渲染

使用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={1800}
itemsize={35}
width={300}
>
 {Row}
</List>
);

六、代码分割和懒加载

使用 React的 React.lazy 和 5uspense 动态加载组件，减少初 始加载时间 示例：

const otherComponent =React.lazy(() =>import("./othercomponent'));
function Mycomponent(){
 return (
  <Suspense fallback={<div>Loading...</div>}>
  <OtherComponent />
  </Suspense>
 );
}

七、使用性能优化工具

使用 React 开发者工具的 Profiler 分析和优化应用的渲染性能。 示例:在 Chrome 或 Firefox 中安装 React Developer Tools，然后在 Profiler 中查看各组件的渲染时间。

八、减少 Redux 或 Context 重渲染

使用 useselector 时，提供精确的选择器函数，避免整个状态变 化导致的组件重渲染。 示例：

const selectedData =useSelector(state =>state.somespecificPart);

九、避免不必要的副作用

确保useEffect中的依赖数组正确配置，避免不必要的副作用执行 示例：

useEffect(() =>{
//副作用逻辑
},[specificDependency])

十、提升图片和资源加载

使用现代图片格式(如 WebP)和图像懒加载技术(如 loading="lazy") 示例：

<img src="image.webp" alt="example" loading="lazy" />

十一、网络请求优化

1、合理使用缓存，避免重复请求。

2、使用abortController取消不再雪要的请求，

十二、优化CSS和样式

1、使用 CSS-in-]s 库(如 styled-components 或 Emotion)提高样式管 理的灵活性和性能。

2、避免全局样式污染，使用模块化样式。