ReactJS 中的 componentWillMount 和 componentDidMount 有什么区别？答案

【问题标题】：What is the difference between componentWillMount and componentDidMount in ReactJS?ReactJS 中的 componentWillMount 和 componentDidMount 有什么区别？
【发布时间】：2015-07-06 02:31:39
【问题描述】：

我查看了 Facebook 在 (React.Component) 的文档，其中提到了如何在客户端/服务器上调用 componentWillMount，而仅在客户端上调用 componentDidMount。 componentWillMount 对服务器做了什么？

【问题讨论】：

标签： reactjs

【解决方案1】：

componentWillMount 本质上是构造函数。您可以设置不影响渲染的实例属性，同步从存储中提取数据并使用它设置状态，以及设置组件时需要运行的其他简单的无副作用代码。

它很少需要，对于 ES6 类也完全不需要。

【讨论】：

和构造函数不一样。在 dev 的严格模式下，例如，您的构造函数将被调用两次（对于两个不同的实例）但只有一个会调用 componentWillMount - stackoverflow.com/questions/61254372/…

【解决方案2】：

补充 FakeRainBrigand 所说的，componentWillMount 在服务器和客户端渲染 React 时会被调用，但 componentDidMount 仅在客户端被调用。

【讨论】：

componentWillMount 将调用服务器和客户端。见：facebook.github.io/react/docs/…
@DaveNewton 怎么样？它没有说componentWillMount 不会被客户端调用
@AyushShanker IMO 提供非误导性信息很重要。由于不明确，因此存在误解的空间：文档是明确的。你是对的，它也没有明显矛盾。

【解决方案3】：

constructor 方法不与componentWillMount 相同。

根据 Redux 的作者所说，从构造函数中调度动作是有风险的，因为它可能导致在渲染时改变状态。

不过，从componentWillMount 发送就可以了。

来自github issue：

当一个组件的构造函数内的 dispatch() 导致另一个组件内的 setState() 时，就会发生这种情况。 React 会跟踪此类警告的“当前所有者”——它认为我们在构造函数内部调用了 setState()，而从技术上讲，构造函数在应用程序的其他部分内部引发了 setState()。我认为我们不应该处理这个问题——它只是 React 尽力做好它的工作。正如您正确指出的那样，解决方案是在 componentWillMount() 内 dispatch() 代替。

【讨论】：

绝对不是在所有情况下都很好，这取决于 componentXxxMount 中的情况，例如，willMount 中的 Ajax 可能会导致问题。
@DaveNewton 我并没有说在所有情况下都可以。我只是举了一个例子，证明“componentWillMount本质上是构造函数”的答案是错误的。感谢您澄清它
@LiranBrimer 这个答案变得不准确，因为 componentWillMount 已被弃用，并且将分别在 0.16 和 0.17 中停止运行，特别是关于“但是，从 componentWillMount 调度很好”。声明

【解决方案4】：

根据文档 (https://facebook.github.io/react/docs/react-component.html)

以 will 为前缀的方法在就在发生某事之前被调用和

以 did 为前缀的方法被称为 right after 发生某事。

【讨论】：

【解决方案5】：

componentWillMount 在组件的 INITIAL render 之前完成，用于评估道具并基于它们执行任何额外的逻辑（通常也更新状态），因此可以在服务器上执行为了获得第一个服务器端呈现的标记。

componentDidMount 在初始的render 之后执行，当 DOM 被更新时（但在此 DOM 更新被绘制到浏览器之前至关重要，允许您与 DOM 本身进行各种高级交互）。这当然只能发生在浏览器本身，因此不会作为 SSR 的一部分发生，因为服务器只能生成标记而不是 DOM 本身，如果使用 SSR，这是在将其发送到浏览器之后完成的

你说的与 DOM 的高级交互？ Whaaaat??... 是的 - 此时由于 DOM 已更新（但用户尚未在浏览器中看到更新），因此可以使用 window.requestAnimationFrame 截取屏幕上的实际绘画，然后执行类似的操作测量将输出的实际 DOM 元素，您可以对其执行进一步的状态更改，非常有用，例如动画到具有未知可变长度内容的元素的高度（因为您现在可以测量内容并为动画），或避免在某些状态更改期间出现内容场景的闪现。

要非常小心，但要小心保护任何 componentDid... 中的状态更改，否则会导致无限循环，因为状态更改也会导致重新渲染，因此会导致另一个 componentDid... 不断重复

【讨论】：

我认为在componentDidMount 中添加setState 不会导致无限循环。
"否则会导致无限循环，因为状态更改也会导致重新渲染，因此会导致另一个 componentDidMount.and on on on and on"，这是一点也不真实。状态更改将导致重新渲染，但不会一次又一次地调用componentDidMount。 componentDidMount 仅在组件被挂载时调用一次。

【解决方案6】：

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

但有一个“陷阱”：获取数据的异步调用将在渲染发生之前不返回。这意味着组件将至少使用空数据渲染一次。

没有办法“暂停”渲染以等待数据到达。你无法从 componentWillMount 中返回承诺或争吵 setTimeout 不知何故。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

我们的组件将无法访问本机 UI（DOM 等）。我们也将无法访问子引用，因为它们尚未创建。 componentWillMount() 是我们处理配置、更新状态以及为第一次渲染做准备的机会。这意味着我们可以根据 prop 值开始执行计算或处理。

【讨论】：

【解决方案7】：

componentWillMount() 的用例

例如，如果您想在您的组件状态中保留组件的创建日期，您可以在此方法中进行设置。请记住，在此方法中设置状态不会重新渲染 DOM。记住这一点很重要，因为在大多数情况下，每当我们更改组件的状态时，都会触发重新渲染。

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

componentDidMount() 的用例

例如，如果您正在构建一个新闻应用程序，该应用程序会获取有关当前新闻的数据并将其显示给用户，并且您可能希望每小时更新一次此数据，而无需用户刷新页面。

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

【讨论】：

【解决方案8】：

ComponentDidMount() 方法只更改类组件中的当前页面，但ComponentWillMount() 更改所有受setStates() 影响的页面

【讨论】：