“愚蠢”的useEffect

爱吃大橘

发布于 2022-12-27 14:10:49

2900

发布于 2022-12-27 14:10:49

文章被收录于专栏：前端笔记薄

我有一个需求，需要监听一个window.xxx的变动，并在它变动的时候更新view。

useEffect

因为我使用的是react，所以我用 useEffect 监听

function Element() {
    const [state, setState] = useState(window.xxx)
    useEffect(() => {
        console.log('set time:' + window.xxx)
        setState(window.xxx)
    }, [window.xxx])

    return <div className="container">
        useEffect {state}

    </div>
}

此时，我发现我太年轻了，useEffect 无法区分是否变化。因为根据官网说，react只会在state更新时候，重新判断 useEffect 是否执行。如果没有state变化，useEffect 连执行的机会都没有。

defineProperty

如何完成，我的需求呢？我想到了 defineProperty。

事实证明，我是对的，只要用 defineProperty 拦截变量的赋值操作，就可以轻松监听变量。代码如下：

function Element() {
    const [state, setState] = useState(window.xxx)

    Object.defineProperty(window, 'xxx', {
        configurable: true,
        set: function (newVal) {
            this._time = newVal
            console.log('set time:' + this._time)
            setState(this._time)
            // 设置state
        },
        get: function () {
            console.log('get time:' + this._time)
            return this._time
        }
    })
    return <div className="container">
        useEffect {state}

    </div>
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-02-15，如有侵权请联系 cloudcommunity@tencent.com 删除

react