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