我有一個功能組件，并希望更新該組件中的一些狀態（基于一些背景關系API物件的值，即我通過useContext獲得的值）
現在，我看到了2個選項；
我只是想了解這兩種方式的區別。另外要補充的是，當使用setState時，我遇到了以下問題 錯誤。太多的重新渲染。React限制了渲染的數量，以防止無限回圈。
補充一下，這個功能組件是App組件的直接子節點，而背景關系物件在另一個組件中被更新，該組件也是App組件的直接子節點。
const MyComponent = (/span>) => {
let myTitle = "ABC"; /Option 1 to use 'myTitle'
//const [myTitle, setMyTitle] = useState('ABC'); //Option 2 to use 'myTitle'。
if (someContextApiObj.value == "XYZ") {
myTitle = "XYZ";
//setMyTitle("XYZ")。
}
return (
<>/span>
<ChildComponent
myTitle={myTitle}。
/>
</>
);
};
export default MyComponent;
uj5u.com熱心網友回復：
你的代碼因為你的if-clause而進入了一個無限的回圈。如果你設定了標題并且條件沒有改變，那么它將在每次重新渲染時被設定，從而導致新的渲染--無限的重新渲染鏈。
使用狀態為您提供了有條件地改變值的能力，而使用不與狀態相連的區域變數則使變數成為常量。
uj5u.com熱心網友回復：
你應該使用Hook useEffect.
。const MyComponent=（/span>）=> {
const [myTitle, setMyTitle] = useState('ABC'); /O選項2使用'myTitle'
useEffect(()=> {
if (someContextApiObj.value == "XYZ") {
setMyTitle("XYZ")
}
}, []);
return (
<>/span>
<ChildComponent
myTitle={myTitle}。
/>
</>
);
};
export default MyComponent;
uj5u.com熱心網友回復：
看來你想根據傳遞給組件的一些道具或背景關系值來計算一個myTitle值。在React中，將傳遞的道具/背景關系值存盤在本地狀態通常被認為是反模式的。計算myTitle值并將其傳遞給子組件。
const MyComponent=（/span>）=> {
const myTitle = someContextApiObj.value == "XYZ" ? "XYZ"/span> : "ABC"/span>;
return < ChildComponent myTitle={myTitle} /> 。
};
如果myTitle值是一個昂貴的計算，或者你只是想提供一個穩定的兒童參考，使用useMemo掛鉤來提供這個。
span class="hljs-keyword">import { useMemo } from 'reaction'。
const MyComponent = (/span>) => {
const myTitle = useMemo(() => {
return someContextApiObj.value === "XYZ" ? "XYZ"/span> : "ABC"/span>;
}, [someContextApiObj])。
return < ChildComponent myTitle={myTitle} /> 。
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/306994.html
標籤：