0

在本次演讲https://reactjs.org/docs/hooks-intro.html中，演讲者编写了类似这样的代码：

class SomeComponent extends React.Component {
     constructor(props){
         super(props)
         this.handleResize.bind(this)
     }

     handleResize(){
          //do something with window.innerWidth
     }

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

为什么要window.addEventListener在 componentDidMount 中？它必须是吗？

从谈话的语气中，我觉得这种情况很常见。

我对反应还很陌生，我也会将浏览器 api 事件订阅放在构造函数中。

window.addEventListener关于为什么将其放入 componentDidMount是否有任何优势？还是出于可读性目的？

4

4 回答 4

1

对我来说这很简单。

首先，您只希望 api 调用或事件侦听器只被调用/初始化一次，componentDidMount()并且constructor保证每个安装的组件只运行一次。

但是，我不会将 api 放入构造函数中，因为如果您希望在从 api 返回数据后更新 UI ，则您需要更改状态，而您不能在constructor. 唯一只运行一次并允许您设置状态的地方是componentDidMount().

对于事件监听器，我认为它可以放在constructor/中componentDidMount。但是，官方文档确实建议将其放入componentDidMount(). 看看这个。

componentDidMount 在组件被挂载并具有 DOM 表示后被调用。这通常是您附加通用 DOM 事件的地方。

于 2020-01-10T17:02:26.860 回答
1

一般来说，构造函数不能有任何副作用。

而且React 文档也已经提到了这一点：

避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用 componentDidMount()。

于 2020-01-10T14:47:49.557 回答
0

生命周期中的window.addEventListener定义，因为里面定义的代码是在DOM渲染完成后执行的。这将是尝试将任何事件处理程序附加到作为 DOM 一部分的元素的正确时机。componentDidMountcomponentDidMount

但是如果你在构造函数中这样做，那么在 DOM 完全渲染之前调用它的机会很多。

在这里阅读更多

于 2020-01-10T14:52:48.870 回答
0

有多种原因componentDidMount()

实际上，componentDidMount出于多种原因，它是调用获取数据的最佳位置。

1-如果您想订阅和取消订阅您的函数，那么您需要调用该函数componentDidMount()并取消订阅（在所有操作之后）调用componentWillUnmount()

2-使用 didMount 可以清楚地表明在初始渲染之前不会加载数据。这会提醒您正确设置初始状态，这样您就不会出现导致错误的未定义状态。

3-componentDidMount()生命周期方法被调用render()以确保成功加载 DOM。

window.addEventListener('resize',this.handleResize) => 您也可以在构造函数中调用，但稍后如果您需要取消订阅，则不能这样做，因为它是初始阶段（仅在最初调用）。

于 2020-01-10T14:48:55.703 回答