React Hook 監(jiān)聽localStorage更新問題
更新時(shí)間：2023年10月26日 08:46:13 作者：叫我蟲蟲吧
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
場(chǎng)景
數(shù)據(jù)存儲(chǔ)在了localStorage里，localStorage變化實(shí)時(shí)更新組件里使用到的數(shù)據(jù)
誤區(qū)
下意識(shí)想到的是按照useEffect監(jiān)聽useState變化那一套
useEffect(()=>{
useData(localStorage.getItem('rightCartData'))
},[localStorage.getItem('rightCartData')])很明顯不行，為什么？
示例不起作用的原因：
是和傳遞給 useEffect 的依賴數(shù)組有關(guān)，它決定了在組件渲染時(shí)是否重新運(yùn)行（render），這意味著如果 localStorage 更改，但它必須 先渲染（render）。
解決這個(gè)問題的方法：
是設(shè)置對(duì) localStorage 的訂閱，監(jiān)視變化并通知組件重新渲染
Window: storage event - Web APIs | MDN
完整解決代碼
如下：
useEffect(() => {
function rightCartData() {
const item = JSON.parse(localStorage.getItem('rightCartData'))
if (item) {
setState(item);
}
}
window.addEventListener('storage', rightCartData)
return () => {
window.removeEventListener('storage', rightCartData)
}
}, [])總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了對(duì)于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
react實(shí)現(xiàn)todolist的增刪改查詳解
這篇文章主要為大家介紹了react實(shí)現(xiàn)todolist的增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識(shí)，對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了react中的雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了React中Props的淺對(duì)比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05
這篇文章主要為大家介紹了前端框架react-spring基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-12-12
React函數(shù)式組件Hook中的useState函數(shù)的詳細(xì)解析
Hook 就是 JavaScript 函數(shù)，這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React Hook useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下2022-10-10
React跨端動(dòng)態(tài)化之從JS引擎到RN落地詳解
這篇文章主要為大家介紹了React跨端動(dòng)態(tài)化之從JS引擎到RN落地，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09