每次組件觸發狀態更改時，即使子組件不依賴于該狀態，它的子組件也會重新渲染。要解決此問題，您需要將子組件包裝React.memo為功能組件或PureComponent用于類組件。這將檢查道具變化并重新渲染孩子。
這里有一個組件在掛載上獲取數據的示例，并有一個觸發狀態的按鈕click：代碼
import React, { useState, useEffect } from "react";
import "./styles.css";
import MyData from "./MyData";
const fakePromise = () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("data returned");
}, 2000);
});
export default function App() {
const [hidden, setHidden] = useState(false);
const [data, setData] = useState();
useEffect(() => {
const fetchData = async () => {
try {
const data = await fakePromise();
setData(data);
} catch (error) {
throw error;
}
};
fetchData();
}, []);
return (
<div className="App">
<div style={{ display: hidden ? "none" : "block" }}>I am visible</div>
<button onClick={() => setHidden(!hidden)}>Toggle Visiblity</button>
{data && <MyData data={data} />}
</div>
);
}
在示例中，您可以看到MyData組件不依賴隱藏狀態，但如果我們不將其包裝在React.memo.
我的數據.js
import React from "react";
const MyData = ({ data }) => {
console.log("render");
return (
<div>
<h1>{data}</h1>
</div>
);
};
//export default MyData;
export default React.memo(MyData);
注意：React.memo比較當前道具和下一個道具，如果其中一些道具是函數或靜態數據，則array/object每次組件重新渲染時將重新創建這些道具，這將重新渲染孩子，因此您需要使用useCallback或之類的鉤子來記住這些道具useMemo。
謝謝希望這能回答你的問題。
