为什么addChangeListener应该在componentDidMount而不是componentWillMount?

时间:2015-06-17 17:37:28

标签: javascript reactjs reactjs-flux flux

我在这里看到这一行作为另一个问题的答案:

" componentWillMount应该是componentDidMount,否则你将在节点中泄漏事件发射器。"

我真的不明白。有人可以更详细地解释一下吗?

更多信息:

使用flux构建react应用程序,作为初始渲染的一部分,子组件计算一些数据。理想情况下,在计算此数据之后,我想调用一个动作,用一部分新数据更新商店的状态。

通常,更新商店的状态会发出导致重新呈现的更改事件。但是,因为更改侦听器不会被添加到componentDidMount(而不是componentWillMount),所以我的顶级组件无法侦听初始渲染期间发生的更改并启动重新渲染。

如果我将addChangeListener移动到似乎可以修复此问题的componentWillMount,但上面的引用表明这是一个坏主意?

2 个答案:

答案 0 :(得分:4)

我认为应该在componentDidMount中设置听众的普遍智慧,因为它可以防止同构应用中出现问题,这是一个错误。我认为98%的非同构应用程序在componentWillMountcomponentDidMount中设置监听器的工作方式相同,但在概念上是错误的,并且在2%的情况下(例如示例)在原始问题中给出它会做错事。

在React源代码中有git问题讨论和评论,建议在服务器上根本不调用componentWillMount,但如果不是,那么在校验和中会产生问题测试将服务器预渲染与客户端初始渲染进行比较。在服务器上使用componentWillMount意味着在这种情况下它不会作为组件生命周期的一部分执行,但这被用作在任何情况下都不将其视为生命周期的一部分的借口。

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

在非同构应用程序中,在componentWillMount中添加侦听器可以在某些情况下保存不必要的重新渲染,并将按文档顺序注册它们。文档顺序的优点是,如果您有一种方法可以在重新呈现组件时刷新挂起的事件(例如,takeRecords上的MutationObserver),那么您可以确保将文档重新呈现为顶部向下而不是自下而上,将渲染复杂度从多项式转换为线性。

此外,在初始渲染和注册侦听器之间没有危险期间,Store可以在不触发渲染的情况下进行更改,导致视图与Store不同步(原始问题中给出的示例问题) )。如果在componentDidMount中注册了侦听器,则需要确保在子节点componentDidMount调用中未更改存储,否则在注册侦听器后强制重新呈现/重新同步,如果在componentDidMount中完成,则以反向文档顺序完成,这可能是多项式复杂度(取决于如何/如果聚合了setStates)。

答案 1 :(得分:3)

如果没有更多背景,很难理解引用的含义。我可以告诉你的是,这两种方法之间存在巨大差异。

一方面,在将组件实际添加到DOM之前调用componentWillMount。这是您必须更新组件状态并在浏览器呈现组件之前呈现它的最后一次机会。

另一方面,一旦组件附加到DOM(真实组件),就会调用componentDidMount

您需要什么取决于您的使用案例。通常,componentDidMount用于与其他库(如jQuery)集成,它提供了一种修改组件呈现的HTML的方法。

我建议你阅读这些链接: