react純函數組件setState更新頁(yè)面不刷新的解決

目錄

問(wèn)題描述：

const [textList, setTextList] = useState(原數組);
setTextList(新數組);

當修改原數組時(shí)，如果原數組是個(gè)深層數組（不只一層），使用setTextList修改時(shí)，不會(huì )觸發(fā)頁(yè)面刷新

原因分析：

這個(gè)涉及到可變對象he不可變對象的知識，在vue和react中，如果更新可變對象時(shí)，可能會(huì )引起視圖更新，這是因為，vue和react默認都是淺監聽(tīng)，只會(huì )監聽(tīng)數據的第一層，內層數據發(fā)生改變，并不會(huì )監聽(tīng)到。

解決方案：

這里我的解決方案是，先將原數組深拷貝，賦值給新數組，再修改新數組，將修改后的新數組傳遞進(jìn)去，這樣就會(huì )引起視圖更新。

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

補：react中，hooks鉤子時(shí)useState更新不渲染組件的問(wèn)題

當使用react，寫(xiě)如圖組件時(shí)，發(fā)現一個(gè)很關(guān)鍵的問(wèn)題，當選擇用class寫(xiě)的時(shí)候，很容易通過(guò)組件更新渲染。
當我決定用函數式組件hooks來(lái)重構我的組件的時(shí)候，發(fā)現了一個(gè)很難搞的問(wèn)題，當我通過(guò)onChange去改變父組件value的時(shí)候，value的值改了，竟然沒(méi)有重新渲染組件？？？？
一臉懵逼的我，于是試圖將class組件時(shí)先將value設為空再賦值-----失敗了
于是試圖通過(guò)鉤子的生命周期看了一遍。。。。------失敗了
還是百度吧------發(fā)現了同樣的問(wèn)題。。。發(fā)現用只要再后面加slice()
于是本著(zhù)先解決問(wèn)題的態(tài)度，將圖中紅圈位置改為了onChange(value.slice())
-----于是，解決了這個(gè)神奇的問(wèn)題。

現在問(wèn)題解決了，回過(guò)頭來(lái)看看到底怎么回事。。。
查看文檔發(fā)現一句話(huà)useState里數據務(wù)必為immutable （不可賦值的對象）
也就是ass component的state也提倡使用immutable數據，但不是強制的，因為只要調用了setState就會(huì )觸發(fā)更新。所以再class組件中沒(méi)有出現這種問(wèn)題，或者通過(guò)改變?yōu)榭赵儋x值是可以觸發(fā)更新的。
但是再使用useState時(shí)，如果在更新函數里傳入同一個(gè)對象時(shí)將無(wú)法觸發(fā)更新。
于是解決思路就是通過(guò)slice() 返回一個(gè)新的對象去賦值是解決問(wèn)題的關(guān)鍵。。。。

以上就是react純函數組件setState更新頁(yè)面不刷新的解決的詳細內容，更多關(guān)于react useState頁(yè)面不刷新的資料請關(guān)注腳本之家其它相關(guān)文章！