Javascript 为什么addChangeListener应该在componentDidMount而不是componentWillMount中？

我把这句话看作是对另一个问题的回答：

componentWillMount应为componentDidMount，否则将在节点中泄漏事件发射器

我真的不明白。有人能详细解释一下吗

更多信息：

使用通量构建react应用程序，作为初始渲染的一部分，子组件计算一些数据。理想情况下，在计算完这些数据后，我想调用一个操作，用这些新数据的一部分更新存储的状态

通常，更新存储的状态会发出一个更改事件，导致重新渲染。但是，因为直到componentDidMount（而不是componentWillMount）才添加更改侦听器，所以我的顶级组件无法侦听初始渲染期间发生的更改并启动重新渲染

---

如果我将addChangeListener移动到componentWillMount，似乎可以解决此问题，但上面的引语表明这是一个坏主意？

如果没有更多上下文，很难理解该引语的含义。我能告诉你的是，这两种方法之间有着巨大的差异

一方面，

componentWillMount

在组件实际添加到DOM之前被调用。这是在浏览器渲染组件之前更新组件状态并使其渲染的最后一次机会

另一方面，

componentDidMount

在组件连接到DOM（真正的DOM）后被调用

您需要什么实际上取决于您的用例。通常，

componentDidMount

用于与其他库（如jQuery）集成，它提供了一种修改组件呈现的HTML的方法

我建议您阅读以下链接：

---

我认为流行的观点是，监听器应该设置在

componentDidMount

中，因为它可以防止同构应用程序中出现问题，这是一个错误。我认为在98%的非同构应用程序中，在

componentWillMount

和

componentDidMount

中设置侦听器将以相同的方式工作，但这在概念上是错误的，在2%的情况下（如原始问题中给出的示例），它将做错误的事情

React源代码中有git问题的讨论和评论，建议最好不要在服务器上调用

componentWillMount

，但如果不是，则在比较服务器预渲染和客户端初始渲染的校验和测试中会产生问题。在服务器上安装

componentWillMount

意味着在这种情况下，它不是作为组件生命周期的一部分执行的，但这被用作在任何情况下都不将其视为生命周期的一部分的借口

事实上，如果您不是在创建同构应用程序，

componentWillMount

正是注册侦听器的正确位置。如果您正在创建一个同构应用程序，那么您必须做出一些妥协，因为在这种情况下校验和/生命周期问题并不理想（可能只是测试服务器环境，然后不注册侦听器？）

在非同构应用程序中，在

componentWillMount

中添加侦听器在某些情况下可以保存不必要的重新渲染，并将它们按文档顺序注册。文档顺序的优点是，如果在组件重新呈现时（例如，

MutationObserver

上的

takeRecords

），您有办法刷新挂起事件，那么您可以确保文档是自上而下而不是自下而上重新呈现的，从而将呈现复杂性从多项式转换为线性

---

此外，从初始渲染到注册侦听器之间没有危险期，存储区可以在不触发渲染的情况下更改，从而导致视图与存储区不同步（原始问题中给出的示例问题）。如果在

componentDidMount

中注册了侦听器，则需要确保在子项中调用

componentDidMount

时未更改存储，或者在注册侦听器后强制重新渲染/重新同步，如果在

componentDidMount

中执行，则以相反的文档顺序执行，这可能是多项式复杂性（取决于React

setStates

如何聚合）。

问题在于，如果我在

componentDidMount

中修改DOM，当他注意到DOM与虚拟DOM不同时，它会给我错误！这类事情通常都有解决办法。我曾经使用过React和Ace富文本编辑器、可调整jQuery大小、可排序jQuery以及许多其他“在React的世界之外”工作并且没有任何问题的东西。您必须注意不要更改React渲染的内容，但在大多数情况下可以添加新元素。如果没有有关任务的详细信息，很难提供帮助。既然

componentWillMount

已被弃用，您能否更新此答案？我很想知道在哪里注册听众，在哪里取消他们的注册change@xaphod我已经有一段时间没有处理过这个问题了，但是下面是关于如何处理有关弃用更改的问题的详细信息。我没有详细回顾过这一点，但数据更新竞赛仍然是一个问题，因为他们建议在订阅

componentDidMount

后显式更新状态。我不知道新的异步行为的安全替代方案是什么。