React监听窗口变化

最新推荐文章于 2025-03-02 13:18:08 发布

赵玉玲

最新推荐文章于 2025-03-02 13:18:08 发布

阅读量8.9k

点赞数

分类专栏： js React 文章标签： React 事件监听

本文链接：https://blog.youkuaiyun.com/qq_22755565/article/details/83089014

版权

js 同时被 2 个专栏收录

12 篇文章

订阅专栏

React

3 篇文章

订阅专栏

本文介绍了React组件如何正确监听窗口变化，强调了改变事件方法中的`this`指向、添加监听以及注销事件的重要性。错误做法包括不在`constructor`中绑定`resizeTTY`的`this`，以及未在`componentWillUnmount`中移除监听，导致的错误和内存泄漏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React组件监听窗口变化

基本思路：

改变事件方法中的this指向

constructor(props) {
  this.resizeBind = this.resizeTTY.bind(this)
}

添加监听

componentDidMount() {
  window.addEventListener('resize', this.resizeBind)
}

注销事件

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeBind)
}

错误写法：

不在constructor中绑定resizeTTY的this指向，这时resizeTTY中的this指向window而不是React组件，在resizeTTY中获取React组件的state或者使用setState方法会抛出错误：（socketList是state的属性）

Cannot read property 'socketList' of undefined

尝试在constructor中用bind绑定this但不赋值给新函数，这时编译不再报错，但窗口变化时resizeTTY执行仍然抛出错误，这时输出this仍指向window对象
这是因为bind()函数执行后会返回指定this改造后的原函数拷贝，但原函数不会改变，所以我们需要使用的是bind返回的新函数而不是resizeTTY

constructor(props) {
  this.resizeTTY.bind(this)
}
componentDidMount() {
  window.addEventListener('resize', this.resizeTTY)
}
componentWillUnmount() {
  window.removeEventListener('resize', this.resizeTTY)
}

Cannot read property 'socketList' of undefined

不在componentWillUnmount生命周期中注销事件，会导致组件销毁后仍在监听