Question

我有一个关于componentDidMount何时触发的问题，我刚开始使用react，而且文档的示例含糊不清。为什么我的组件没有开火？

var App = React.createClass({    
     getInitialState: function() {   
      var events = ['initial state has been called'];  
      return {   
       events: events   
      }    
     },         
     componentWillMount: function() {    
      return {    
       mount: this.state.events.push('componentWillMount has been called')    
      }    
     },    
     componentDidMount: function() {    
      return     
      console.log('mounted!');      
     },    
     render: function() {    
      var eventMap = this.state.events.map(function(event, i) {   
     return <li key={i}>{event}</li>;       
    })
      return (    
       <div>
        <ul>
         {eventMap}
        </ul>
       </div>
      )
     }
    })

    ReactDOM.render(
     <App />,
     document.getElementById('container')
    )

Answer 1

您可能会问为什么eventMap不包含li字符串'componentWillMount has been called'。这是因为您无法push项目this.state。您必须致电this.setState，这将导致您的render功能再次运行。

此外，由于mount没有将结果传递给任何内容，因此您无法清楚为什么要使用密钥componentWillMount返回对象。

componentWillMount: function() {    
  var events = this.state.events;
  events.push('a new value')    
  this.setState({ events: events }); // important!
}

您可能也想知道为什么在您的componentDidMount函数中没有出现控制台消息。这是因为您在返回后无法获得新行：

componentDidMount: function() {    
  return // magic semi-colon gets added here, nothing below will happen.
  console.log('mounted!');      
}

做正确的事并把你回来的东西放在同一条线上（或使用parens）

componentDidMount: function() {    
  return console.log('mounted!');
},

OR

componentDidMount: function() {    
  return (    
    console.log('mounted!');      
  )
}

但是，正如相当粗鲁的@zerkms指出的那样，从这个函数返回任何内容都没有意义..这只是指出为什么你的console.log没有被触发。

我发现这些关于组件生命周期的文档非常清楚，所以请保持它们开放：

https://facebook.github.io/react/docs/component-specs.html

ComponentDidMount与ComponentWillMount？

1 个答案: