React Hook 监听localStorage更新

场景：数据存储在了localStorage里，localStorage变化实时更新组件里使用到的数据

误区：

下意识想到的是按照useEffect监听useState变化那一套

    useEffect(()=>{
        useData(localStorage.getItem('rightCartData'))
    },[localStorage.getItem('rightCartData')])

很明显不行，为什么？

示例不起作用的原因是和传递给 useEffect 的依赖数组有关，它决定了在组件渲染时是否重新运行（render），这意味着如果 localStorage 更改，但它必须 先渲染（render）。 解决这个问题的方法是设置对 localStorage 的订阅，监视变化并通知组件重新渲染

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)
        }
    }, [])