我有一个需求,需要监听一个window.xxx的变动,并在它变动的时候更新view。
因为我使用的是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 拦截 变量 的赋值操作,就可以轻松监听变量。代码如下:
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>
}