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

What is the difference between componentWillMount and componentDidMount in ReactJS?

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

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

很少需要它，ES6 根本不需要它 类。

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

constructor 方法 与 componentWillMount 不同。

根据 Redux 的作者的说法，从构造函数中分派操作是有风险的，因为它可能会导致在渲染时改变状态。

但是，从 componentWillMount 发送就可以了。

来自 github issue:

This happens when dispatch() inside one component's constructor causes a setState() inside another component. React keeps track of the “current owner” for such warnings—and it thinks we're calling setState() inside the constructor when technically constructor causes a setState() inside some other part of the application. I don't think we should handle this—it's just React trying its best do its job. The solution is, as you correctly noted, to dispatch() inside componentWillMount() instead.

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

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

以 did 为前缀的方法在 发生某事后立即调用 r。

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

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

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

要非常小心，但要注意任何 componentDid... 中的状态变化，否则会导致无限循环，因为状态变化也会导致重新渲染，因此会导致另一个 componentDid... 等等不断

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

There’s a “gotcha,” though: An asynchronous call to fetch data will not return before the render happens. This means the component will render with empty data at least once.

There is no way to “pause” rendering to wait for data to arrive. You cannot return a promise from componentWillMount or wrangle in a setTimeout somehow.

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

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

Use-case for the componentWillMount()

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

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

Use-case for the componentDidMount()

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

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

ComponentDidMount() 方法仅更改 class 组件中的当前页面，但 ComponentWillMount() 更改受 setStates()

影响的所有页面