Reactjs 生命周期函数渲染两次

Question

我有一个关于componentDidMount机制的问题。我正在开发一个天气应用，使用外部API获取城市的预报数据。

我的预报容器是这样构建的

var React = require('react');
var Forecast = require('../components/Forecast');
var weatherHelpers = require('../utils/weather');

var ForecastContainer = React.createClass({
  getInitialState: function(){
    return {
      isLoading: true,
      forecastData: {}
    }
  },

  componentDidMount: function(){
    weatherHelpers.getCityForecast(this.props.routeParams.city)
    .then(function(results){
      this.setState({
        isLoading: false,
        forecastData: results
      })
    }.bind(this))
  },

  render: function() {
    return (
      <Forecast
        city={this.props.routeParams.city}
        isLoading={this.state.isLoading}
        forecastData={this.state.forecastData}
      />
      )
  }
});

module.exports = ForecastContainer;

我正在使用axios发送http请求到天气API，并将该功能存储在名为weatherHelpers的帮助文件中。

function Forecast(props) {
  console.log(props)
  return (
    <div style={styles.container}>Forecast component</div>
  )
}

当我从我的Forecast组件中记录props时，它会记录两次。一次是初始状态，另一次是更新后的状态。这只是状态生命周期的运作方式吗：在componentDidMount内部运行指令之间存在延迟的原因？我的组件是否重新渲染（因此有两个控制台日志）？如果是这样的话，那么是什么机制在起作用呢？这个组件如何监听自己的状态？

- Coder_Nick

---

我在这里没有看到 componentWillMount。 - jmargolisvt

看起来@Coder_Nick的意思是componentDidMount。我修改了问题，因为这让我在最初的回答中感到困惑。 - Jim Stewart

Answer 1

这是因为在组件的生命周期中，render方法会在componentDidMount方法之前运行（请参考React文档）。

顺序如下：

constructor()
componentWillMount()
render()
componentDidMount()

在 componentDidMount 运行时，render 已经运行过了。然后，在 componentDidMount 中的状态改变会触发另一次渲染。

编辑

我的旧答案（不正确，但现在已修改）如下，但还有一些需要记住的事情。如果你将 componentDidMount 改为 componentWillMount，它仍然会渲染两次，因为有 promise 的存在：

weatherHelpers.getCityForecast(this.props.routeParams.city).then(...

当组件首次渲染时，componentWillMount 会运行，设置好 promise，然后渲染自己。然后 promise 完成，更新状态，React 基于状态更改再次进行渲染。

- Jim Stewart

---

它不需要是一个承诺。render将在componentDidMount之前运行，正是setState触发了另一个render。 - azium

好观点；我被问题的措辞困扰，一直在componentWillMount空间里想。提交你的答案，我会点赞的。 - Jim Stewart

如果您没有看到我的编辑，请让我知道，但如果您发布了内容，我会遵从您的意愿。 - Jim Stewart

Answer 2

我认为当在componentDidMount中发送请求并告诉它在获取响应后执行then中的代码时。

你设置了该事件并渲染了组件。然后当响应返回时，它运行传递给then的函数，更新状态。

你将这个状态作为props传递给Forecast组件，这会注意到props已经改变，从而导致新的渲染。

- menor