react中useState改變值不渲染

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

所以此時 setArr(arr) 后，棧中的地址還是原地址，React淺監(jiān)聽到地址沒變，故會認為State并未改變，故沒有重渲染頁面

解決的辦法

示例如下：

利用ES6的拓展符

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

react踩坑 useState的兩次渲染

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

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

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

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

StrictMode 目前有助于：

• 識別不安全的生命周期
• 關于使用過時字符串 ref API 的警告
• 關于使用廢棄的 findDOMNode 方法的警告

檢測意外的副作用

檢測過時的 context API

檢測意外的副作用

從概念上講，React 分兩個階段工作：

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

提交 階段發(fā)生在當 React 應用變化時。（對于 React DOM 來說，會發(fā)生在 React 插入，更新及刪除 DOM 節(jié)點的時候。）在此階段，React 還會調(diào)用 componentDidMount 和 componentDidUpdate 之類的生命周期方法。

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

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

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

因為上述方法可能會被多次調(diào)用，所以不要在它們內(nèi)部編寫副作用相關的代碼，這點非常重要。忽略此規(guī)則可能會導致各種問題的產(chǎn)生，包括內(nèi)存泄漏和或出現(xiàn)無效的應用程序狀態(tài)。不幸的是，這些問題很難被發(fā)現(xiàn)，因為它們通常具有非確定性。

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

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

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

注意：

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

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

最新評論