提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

“愚蠢”的useEffect

2023-02-18 16:43:13 时间

我有一个需求，需要监听一个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>
}

相关文章