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组件中记录道具时，会记录两次。一旦处于初始状态并再次处于更新状态。这只是状态生活的运作：componentDidMount中初始状态和运行指令之间的延迟？是否重新呈现了我的组件（因此有两个控制台日志）。如果是这样，那么正在发挥作用的机制是什么。组件如何监听它的状态？

Answer 1

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

订单是：

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

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

修改

我的旧（不正确，但现在已修改）答案如下，但要注意其他事项。如果您将componentDidMount更改为componentWillMount，由于承诺，它仍会呈现两次：

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

最初渲染组件时，componentWillMount将运行，设置promise，然后自行渲染。然后，promise完成，更新状态，React再次根据状态更改呈现。

Answer 2

我认为当你在componentDidMount上发送请求并告诉它在你得到响应时执行代码时。

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

你将这个状态作为道具传递到预测组件，这注意到道具已经改变并导致新的渲染。

Reactjs生命周期功能渲染两次

2 个答案: