首頁猿問 React useEffect()...

React useEffect() ：比較兩個對象數組是否相等的最有效方法

JavaScript

拉丁的傳說 2023-10-14 15:41:58

我有一個 useEffect() ，當對象數組發生變化時應該觸發它。 useEffect(() => { setNotesToRender(props.notes) }, [props.notes]);useEffect 依賴項無法比較對象數組，因此上例中的 useEffect() 觸發的次數超出了需要的次數。我只希望在數組不同時觸發 useEffect() 。應觸發更新的數組示例array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}] array2 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'four'}]到目前為止我測試過的事情是：props.notes.length --> 可以工作，但不可靠 - 原因很明顯:)...props.notes --> 如果數組為空則不起作用 - 并且可能會導致嚴重的性能問題？比較兩個對象數組的最有效方法是什么？數組可能包含超過 1000 個對象。親切的問候/K更新我需要稍后使用文本搜索過濾掉某些“注釋”，這就是我使用 React 狀態的原因。我的示例代碼中沒有顯示這一點。

查看完整描述

3 回答

心有法竹

TA貢獻1866條經驗獲得超5個贊

最有效的方法是什么

最有效的方法可能是針對這種特定形狀的數據進行自定義比較。您可以使用JSON.stringify或其他一些通用比較函數，但由于顯而易見的原因，它不太可能是最有效的。

因此，在您的示例中，一個簡單的比較函數可能看起來像 ->

const array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}];

const array2 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'four'}];

const arrayIsEqual = (a1, a2) =>

a1 === a2 ||

a1.length === a2.length &&

a1.every((f,i) =>

f.id === a2[i].id &&

f.title === a2[i].title

)

//tests

const a1clone = [...array1];

//different arrays not equal

console.log(arrayIsEqual(array1, array2)); //false

//different arrays equal

console.log(arrayIsEqual(array1, a1clone)); //true

//different arrays same values, but different order

a1clone.reverse();

console.log(arrayIsEqual(array1, a1clone)); //false

//same arrays, fastest check

console.log(arrayIsEqual(array1, array1)); //true

反對回復 2023-10-14

隔江千里

TA貢獻1906條經驗獲得超10個贊

首先1k個對象并不是一個大量的對象，但是回到問題：最簡單的方法是使用

JSON.stringify(object1)?===?JSON.stringify(object2);

但這并不是最有效的，當性能成為問題時，我能想到的最明智的事情是使用元屬性，例如，version每當我們以任何方式更新對象時，我們也會增加版本。然后你所要做的就是根據 id + version 映射檢查兩個數組。

如果不需要第二個選項，您可以使用lodash.deepCompare或創建自己的函數。

反對回復 2023-10-14

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

確實，useEffect無法比較對象數組，因此讓useEffect鉤子運行。

但你可以做的是添加一個if-statement是否JSON.stringified notesToRender and JSON.stringified props.notes相等。（或者你可以使用lodash/isEqual）來阻止設置狀態方法運行。

useEffect但是，如果您認為這仍然不是一個有效的解決方案，我們首先必須看看您為什么需要。

從您的代碼來看，我認為您正在useState根據傳入的道具設置一個鉤子。

再想一想，為什么不考慮直接渲染道具呢。

來自官方 React 文檔頁面：
https://reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state

它是通過 props 從父級傳遞的嗎？如果是這樣，它可能不是狀態。
隨著時間的推移它會保持不變嗎？如果是這樣，它可能不是狀態。
您可以根據組件中的任何其他狀態或道具來計算它嗎？如果是這樣，那么它就不是狀態。

反對回復 2023-10-14

3 回答
0 關注
304 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React useEffect() ：比較兩個對象數組是否相等的最有效方法

React useEffect() ：比較兩個對象數組是否相等的最有效方法

3 回答

添加回答