react中useState改變值不渲染的解決方式

更新時(shí)間：2022年12月03日 08:59:25 作者：湫ii

這篇文章主要介紹了react中useState改變值不渲染的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react中useState改變值不渲染

React中默認(rèn)淺監(jiān)聽(tīng)，當(dāng)State值為對(duì)象時(shí)，棧中存的是對(duì)象的引用（地址），setState改變的是堆中的數(shù)據(jù)

所以此時(shí) setArr(arr) 后，棧中的地址還是原地址，React淺監(jiān)聽(tīng)到地址沒(méi)變，故會(huì)認(rèn)為State并未改變，故沒(méi)有重渲染頁(yè)面

解決的辦法

示例如下：

利用ES6的拓展符

const [arr, setArr] = useState([])
setArr([...arr])

react踩坑 useState的兩次渲染

問(wèn)題背景，函數(shù)組件中使用useState后，console.log發(fā)現(xiàn)組件重復(fù)渲染。

一開(kāi)始我以為是useState的問(wèn)題，經(jīng)查驗(yàn)，發(fā)現(xiàn)是index.tsx里<React.StrictMode>的坑

ReactDOM.render(
? <React.StrictMode>
? ? <App />
? </React.StrictMode>,
? document.getElementById('root')
);

以下內(nèi)容，摘自react官網(wǎng)，如果你很忙可以不看！總之，渲染兩次沒(méi)事，生產(chǎn)模式下不會(huì)這樣。

StrictMode 目前有助于：

識(shí)別不安全的生命周期
關(guān)于使用過(guò)時(shí)字符串 ref API 的警告
關(guān)于使用廢棄的 findDOMNode 方法的警告

檢測(cè)意外的副作用

檢測(cè)過(guò)時(shí)的 context API

檢測(cè)意外的副作用

從概念上講，React 分兩個(gè)階段工作：

渲染階段會(huì)確定需要進(jìn)行哪些更改，比如 DOM。在此階段，React 調(diào)用 render，然后將結(jié)果與上次渲染的結(jié)果進(jìn)行比較。

提交階段發(fā)生在當(dāng) React 應(yīng)用變化時(shí)。（對(duì)于 React DOM 來(lái)說(shuō)，會(huì)發(fā)生在 React 插入，更新及刪除 DOM 節(jié)點(diǎn)的時(shí)候。）在此階段，React 還會(huì)調(diào)用 componentDidMount 和 componentDidUpdate 之類(lèi)的生命周期方法。

提交階段通常會(huì)很快，但渲染過(guò)程可能很慢。因此，即將推出的 concurrent 模式 (默認(rèn)情況下未啟用) 將渲染工作分解為多個(gè)部分，對(duì)任務(wù)進(jìn)行暫停和恢復(fù)操作以避免阻塞瀏覽器。這意味著 React 可以在提交之前多次調(diào)用渲染階段生命周期的方法，或者在不提交的情況下調(diào)用它們（由于出現(xiàn)錯(cuò)誤或更高優(yōu)先級(jí)的任務(wù)使其中斷）。

渲染階段的生命周期包括以下 class 組件方法：

constructor
componentWillMount (or UNSAFE_componentWillMount)
componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
componentWillUpdate (or UNSAFE_componentWillUpdate)
getDerivedStateFromProps
shouldComponentUpdate
render
setState 更新函數(shù)（第一個(gè)參數(shù)）

因?yàn)樯鲜龇椒赡軙?huì)被多次調(diào)用，所以不要在它們內(nèi)部編寫(xiě)副作用相關(guān)的代碼，這點(diǎn)非常重要。忽略此規(guī)則可能會(huì)導(dǎo)致各種問(wèn)題的產(chǎn)生，包括內(nèi)存泄漏和或出現(xiàn)無(wú)效的應(yīng)用程序狀態(tài)。不幸的是，這些問(wèn)題很難被發(fā)現(xiàn)，因?yàn)樗鼈兺ǔ＞哂蟹谴_定性。

嚴(yán)格模式不能自動(dòng)檢測(cè)到你的副作用，但它可以幫助你發(fā)現(xiàn)它們，使它們更具確定性。

通過(guò)故意重復(fù)調(diào)用以下函數(shù)來(lái)實(shí)現(xiàn)的該操作：