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 向天气 api 发送 http get 请求，并将该功能存储在名为 WeatherHelpers 的帮助程序文件中。

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

当我从 Forecast 组件记录 props 时，它会被记录两次。一次为初始状态，一次为更新后的状态。这只是状态生命的运作吗:初始状态和 componentDidMount 内运行指令之间的滞后？是否重新渲染了我的组件(因此有两个控制台日志)。如果是这样，起作用的机制是什么？组件如何监听它的状态？

Answer 1

这是因为在生命周期中 render 在 componentDidMount 之前运行(请参阅 React documentation )。

顺序是:

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

当componentDidMount运行时，render已经运行。 componentDidMount 中的状态更改会触发另一个渲染。

编辑

我的旧答案(不正确，但现在已修改)如下，但还有其他需要记住的事情。如果您将 componentDidMount 更改为 componentWillMount，它仍然会渲染两次，因为 promise :

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

当组件最初渲染时，componentWillMount 将运行，设置 Promise，然后渲染自身。然后 Promise 完成，更新状态，React 根据状态变化再次渲染。