為什么添加了 memo ，子組件2依然重新渲染了呢？
因為父組件向子組件2傳遞了引用類型的數據
const userInfo = {name: "朝陽",};
<Child2 userInfo={userInfo} />
memo() 函數的本質是通過校驗Props中數據的內存地址是否改變來決定組件是否重新渲染組件的一種技術。
每次父組件重新渲染時，引用類型的數據 userInfo 的內存地址都會重新生成，導致子組件重新渲染。
注意事項：若 userInfo 是用 useState 聲明的響應式變量，則內存地址不會重新生成，所以不會引發子組件的重新渲染。
// 不會引發添加了 memo 的子組件重新渲染const [userInfo] = useState({ name: "朝陽" });
useMemo 的使用場景
父組件向子組件傳遞了引用類型的數據，但仍想緩存子組件，則需使用 useMemo
useMemo 的語法
- 第1個參數：返回目標數據的函數
- 第2個參數：由依賴項構成的數組，和 useEffect 類似，當依賴項發生改變時，也會觸發 useMemo 內第一個參數的處理函數執行，引發子組件重新渲染！
- 返回：被緩存的目標數據
import { useMemo } from "react";
const userInfo = useMemo(() => {return { name: "朝陽" };}, []);
完整范例代碼
src/page/Index/Father.jsx
import { useState, useMemo } from "react";
import Child1 from "./Child1.jsx";
import Child2 from "./Child2.jsx";export default function Father() {console.log("渲染父組件");const userInfo = useMemo(() => {console.log("執行 useMemo");return { name: "朝陽" };}, []);const [num, setNum] = useState(0);function increase() {setNum(num + 1);}return (<div style={{ border: "1px solid", padding: "10px" }}><h1>父組件</h1><p>num的值為：{num}</p><button onClick={increase}>+1</button><Child1 /><Child2 userInfo={userInfo} /></div>);
}
