我所知道的是，如果我們傳遞相同的狀態，useState 將不會重新渲染，我自己對其進行了測驗，但它僅在組件第一次重新渲染時起作用，并將初始狀態傳遞給 useState。但是在下面的示例中，即使我傳遞了相同的參考，useState 也會重新渲染組件，useEffect 也知道狀態沒有改變。帶有 console.logs 的圖片顯示了這種行為。
const arr = [
{ name: 'Khaled', id: 0 },
{ name: 'Mohamed', id: 1 },
{ name: 'Ahmed', id: 2 },
{ name: 'Mohsen', id: 3 },
];
function App() {
console.log('num $1');
const [same, setSame] = useState({});
useEffect(() => {
console.log('num $3');
const test = arr.find((el) => el.id === 0);
console.log(Object.is(same, test));
setSame(test);
}, [same]);
console.log('num $2');
return <div>welcome</div>;
}
uj5u.com熱心網友回復：
該組件被渲染兩次，因為您具有相同狀態的初始值為空 { }。在 useEffect 中，您使用新物件更新此狀態，然后 useEffect 觸發已添加到同一狀態的新值。這是您陣列中的匹配物件。然后組件重新渲染，這就是為什么你在 console.log 中獲得了真正的價值。
const arr = [
{ name: 'Khaled', id: 0 },
{ name: 'Mohamed', id: 1 },
{ name: 'Ahmed', id: 2 },
{ name: 'Mohsen', id: 3 },
];
function App() {
console.log('num $1');
const [same, setSame] = useState({}); <= initial value
useEffect(() => {
console.log('num $3');
const test = arr.find((el) => el.id === 0);
console.log(Object.is(same, test)); <= changed from false to true because the new value of same
setSame(test); <= you updated the state
}, [same]); <= the value of same changed from { } to a new value and that's make the component to re-render
console.log('num $2');
return <div>welcome</div>;
}
uj5u.com熱心網友回復：
以前的答案完美地解釋了它。要不重新渲染狀態，您必須使用原始陣列對其進行初始化。
const arr = [
{ name: 'Khaled', id: 0 },
{ name: 'Mohamed', id: 1 },
{ name: 'Ahmed', id: 2 },
{ name: 'Mohsen', id: 3 },
];
function App() {
console.log('num $1');
const [same, setSame] = useState(arr); <= initial value is now original arr
useEffect(() => {
console.log('num $3');
const test = arr.find((el) => el.id === 0);
console.log(Object.is(same, test)); <= changed from false to true because the new value of same
setSame(test); <= you updated the state
}, [same]); <= the value of same changed from { } to a new value
console.log('num $2');
return <div>welcome</div>;
}
請注意，這僅適用于參考型別。Hook 不會對物件或陣列進行比較，它只是檢查參考是否更改。這不適用于值型別。
uj5u.com熱心網友回復：
我對你到底想要做什么有點困惑，但這是我對此的理解，希望能回答你的問題。
重要的是要記住，useEffect()無論如何都會在組件安裝（第一次渲染）時呼叫 a 。這就是為什么你的組件在第一次渲染時會吐出num $3控制臺日志的原因，盡管從邏輯上講你會期望它根本不會運行，因為唯一的setSame()功能是在它useEffect()自己內部。
由于組件在使用看似相同的物件設定狀態后重新渲染，所以這里要記住的另一件重要的事情（以及一般的 JavaScript）是參考相等。考慮以下：
{} === {} //false
即使從邏輯上講，您會期望兩個相同的物件計算為兩個相等，但就 JavaScript 而言，它們并不相同。因此，當您將一個物件傳遞給與當時狀態相同的setSame()函式時，JavaScript 將其視為狀態更改并在 React 中提示重新渲染。same
希望這可以幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494340.html
標籤：javascript 反应 反应钩子 使用效果 使用状态
上一篇：jQuery非文本輸入驗證
下一篇：如何限制正則運算式中的小數點？