一、簡介

React.memo?是 React 提供的一個高階組件（Higher-Order Component），用于優化函數組件的渲染性能，它通過淺比較（shallow compare）props 的變化來決定是否重新渲染組件。

1.1 基本用法

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

1.2 主要特點

1. 性能優化：僅在 props 發生變化時重新渲染組件

2. 淺比較：默認使用淺比較（shallow comparison）來比較新舊 props

3. 自定義比較：可以傳入第二個參數來自定義比較邏輯

1.3 自定義比較函數

const MyComponent = React.memo((props) => {/* 使用 props 渲染 */},(prevProps, nextProps) => {/* 返回 true 表示跳過渲染，false 表示需要渲染 */return prevProps.value === nextProps.value;}
);

1.4 使用場景

1. 純展示組件（Pure Presentational Components）

2. 渲染成本較高的組件

3. 頻繁重新渲染但 props 變化不大的組件

二、代碼實現

import { memo, useState } from "react";// 子組件
const ChildComponent = memo(({ name }) => {console.log("子組件重新渲染了");return (<div><h1>子組件name： {name}</h1></div>);
});export default function App() {const [count, setCount] = useState(0);const [name, setName] = useState("c-n");console.log("父組件重新渲染了");return (<div><button onClick={() => setCount(count + 1)}>+1</button><ChildComponent name={name} /></div>);
}