第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

拉丁的傳說 2023-10-14 15:41:58
我有一個 useEffect() ,當對象數(shù)組發(fā)生變化時應(yīng)該觸發(fā)它。  useEffect(() => {       setNotesToRender(props.notes)   }, [props.notes]);useEffect 依賴項無法比較對象數(shù)組,因此上例中的 useEffect() 觸發(fā)的次數(shù)超出了需要的次數(shù)。我只希望在數(shù)組不同時觸發(fā) useEffect() 。應(yīng)觸發(fā)更新的數(shù)組示例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 --> 如果數(shù)組為空則不起作用 - 并且可能會導致嚴重的性能問題?比較兩個對象數(shù)組的最有效方法是什么?數(shù)組可能包含超過 1000 個對象。親切的問候/K更新 我需要稍后使用文本搜索過濾掉某些“注釋”,這就是我使用 React 狀態(tài)的原因。我的示例代碼中沒有顯示這一點。
查看完整描述

3 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

最有效的方法是什么

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

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

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


查看完整回答
反對 回復(fù) 2023-10-14
?
隔江千里

TA貢獻1906條經(jīng)驗 獲得超10個贊

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

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

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

如果不需要第二個選項,您可以使用lodash.deepCompare或創(chuàng)建自己的函數(shù)。


查看完整回答
反對 回復(fù) 2023-10-14
?
開心每一天1111

TA貢獻1836條經(jīng)驗 獲得超13個贊

確實,useEffect無法比較對象數(shù)組,因此讓useEffect鉤子運行。

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

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

從您的代碼來看,我認為您正在useState根據(jù)傳入的道具設(shè)置一個鉤子。

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

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

  1. 它是通過 props 從父級傳遞的嗎?如果是這樣,它可能不是狀態(tài)。

  2. 隨著時間的推移它會保持不變嗎?如果是這樣,它可能不是狀態(tài)。

  3. 您可以根據(jù)組件中的任何其他狀態(tài)或道具來計算它嗎?如果是這樣,那么它就不是狀態(tài)。


查看完整回答
反對 回復(fù) 2023-10-14
  • 3 回答
  • 0 關(guān)注
  • 318 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號