react純函式元件useState更新頁面不重新整理

2021-10-24 02:12:02 字數 523 閱讀 9711

const

[textlist, settextlist]

=usestate

(原陣列)

;settextlist

(新陣列)

;

當修改原陣列時,如果原陣列是個深層陣列(不只一層),使用settextlist修改時,不會觸發頁面重新整理

這個涉及到可變物件he不可變物件的知識,在vue和react中,如果更新可變物件時,可能會引起檢視更新,這是因為,vue和react預設都是淺監聽,只會監聽資料的第一層,內層資料發生改變,並不會監聽到。

這裡我的解決方案是,先將原陣列深拷貝,賦值給新陣列,再修改新陣列,將修改後的新陣列傳遞進去,這樣就會引起檢視更新。

var lists = textlist.

concat()

;lists.

splice

(index,1)

;settextlist

(lists)

;

一文帶你了解React 純函式元件

所謂純函式,它是這樣一種函式 即相同的輸入,永遠會得到相同的輸出,而且沒有任何可觀察的 從純函式的定義,可以提取出純函式的必要條件 先來看個例子,做下對比 let friend 非純函式 會修改函式外變數 friend 的值 function 純函式 返回乙個新物件,且不會修改引數 function...

React函式元件和類元件的區別

定義元件有兩個要求 元件名稱必須以大寫字母開頭 元件的返回值只能有乙個根元素 function welcome props h1 reactdom.render react document.getelementbyid root 函式元件接收乙個單一的props物件並返回了乙個react元素 cl...

render 元件 純函式

render 當 被呼叫時,它會檢查 和 的變化並返回以下型別之一 render 函式應該為純函式,這意味著在不修改元件 state 的情況下,每次呼叫時都返回相同的結果,並且它不會直接與瀏覽器互動。如需與瀏覽器進行互動,請在 componentdidmount 或其他生命週期方法中執行你的操作。保...