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 之類的生命周期方法。

提交階段通常會(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)部編寫副作用相關(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)的該操作：

• 類組件的 constructor，render 以及 shouldComponentUpdate 方法
• 類組件的生命周期方法 getDerivedStateFromProps
• 函數(shù)組件體
• 狀態(tài)更新函數(shù) (即 setState 的第一個(gè)參數(shù)）
• 函數(shù)組件通過(guò)使用 useState，useMemo 或者 useReducer

注意：

這僅適用于開(kāi)發(fā)模式。生產(chǎn)模式下生命周期不會(huì)被調(diào)用兩次。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論