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、合理使用缓存，避免重复请求。

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

const cache = new Map(); // 用于存储请求缓存

const fetchData = async (url) => {
  if (cache.has(url)) {
    console.log("从缓存中获取数据");
    return cache.get(url);
  }
  console.log("从接口请求数据");
  const response = await axios.get(url);
  cache.set(url, response.data); // 存入缓存
  return response.data;
};

const App = () => {
  const [data, setData] = useState(null);

  const handleClick = async () => {
    const result = await fetchData("https://jsonplaceholder.typicode.com/posts/1");
    setData(result);
  };

  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default App;

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

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [controller, setController] = useState(null); // 存储 AbortController 实例

  const fetchData = async () => {
    setLoading(true);
    // 创建新的 AbortController 实例
    const newController = new AbortController();
    setController(newController);

    try {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts/1",
        { signal: newController.signal } // 将 signal 传递给请求
      );
      setData(response.data);
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log("请求已取消", error.message);
      } else {
        console.error("请求失败", error);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    if (controller) {
      controller.abort(); // 取消请求
      console.log("取消请求");
    }
  };

  useEffect(() => {
    return () => {
      // 组件卸载时自动取消请求
      if (controller) {
        controller.abort();
      }
    };
  }, [controller]);

  return (
    <div>
      <button onClick={fetchData} disabled={loading}>
        获取数据
      </button>
      <button onClick={handleCancel} disabled={!loading}>
        取消请求
      </button>
      {loading && <p>加载中...</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default App;

十二、优化CSS和样式

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

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