Question

我在https://facebook.github.io/react/docs/component-specs.html查看了Facebook的文档，并提到了如何在客户端/服务器上调用componentWillMount，而componentDidMount仅在客户端上调用。 componentWillMount对服务器做了什么？

Answer 1

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

这很少需要，而且根本不需要ES6课程。

Answer 2

constructor方法不是与componentWillMount相同。

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

但是，从componentWillMount发送邮件就好了。

来自github issue：

当一个组件的构造函数中的dispatch（）导致另一个组件内的setState（）时，会发生这种情况。 React跟踪这些警告的“当前所有者” - 它认为我们在构造函数中调用setState（），当技术构造函数在应用程序的某个其他部分内导致setState（）时。我认为我们不应该处理这个 - 只是React尽力做好自己的工作。正如您所正确指出的那样，解决方案是在componentWillMount（）中调度（）。

Answer 3

要添加到FakeRainBrigand所说的内容，在服务器和客户端上呈现React时会调用componentWillMount，但只在客户端上调用componentDidMount。

Answer 4

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

在DOM更新后的初始componentDidMount之后执行

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

与您说的DOM进行高级互动？ Whaaaat ?? ...是的 - 此时因为DOM已经更新（但是用户还没有看到浏览器中的更新），可以使用window.requestAnimationFrame拦截实际绘画到屏幕然后执行测量将要输出的实际DOM元素，您可以执行进一步的状态更改，例如动画到具有未知可变长度内容的元素的高度非常有用（因为您现在可以测量内容并指定高度）动画），或在某些状态变化期间避免内容闪现。

要小心保护任何componentDid...中的状态更改，否则可能会导致无限循环，因为状态更改也会导致重新渲染，因此另一个componentDid...以及on和on上

Answer 5

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

前缀的方法在之前被称为和

以 为前缀 的方法在发生之后被称为 ight。

Answer 6

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

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

没有办法“暂停”渲染等待数据到达。您   无法从componentWillMount或warngle中返回一个promise   以某种方式setTimeout。

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

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

Answer 7

componentWillMount（）的用例

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

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

componentDidMount（）的用例

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

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

Answer 8

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

ReactJS中componentWillMount和componentDidMount有什么区别？

8 个答案: