ReactJS组件的生命周期

为了理解ReactJS中的组件的生命周期，我们通过下面的示例代码来直观的感受一下，当我们的React组件的整个生命周期都发生了哪些事件。直接上代码和运行结果吧！

css代码

.main { padding: 10px 50px; }

.log { padding: 5px; border-bottom: 1px solid #ccc; }

HTML代码

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script src="http://libs.cdnjs.net/react/0.12.0/react.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="main">
      <h1>Understanding the React Component Lifecycle</h1>
      <div id="app"></div>
      <hr />
      <button type="button" id="unmount" class="btn btn-danger">Unmount</button>
      <hr />
      <div id="screen"></div>  
    </div>
    <script src="script.js"></script>
  </body>

</html>

jsx代码

writeToScreen('Initial','primary');

var Welcome = React.createClass({
  getInitialState: function() {
    writeToScreen('GetInitialState','info');
    return {foo : 1};  
  },getDefaultProps: function() {
      writeToScreen('GetDefaultProps','info');
      return {bar: 2};
  },update: function() {
    writeToScreen('Updating State','primary');
    this.setState({foo: 2});
  },render: function() {
    writeToScreen('Render','success');
    return (<div>
      This.state.foo: {this.state.foo} <br />
      This.state.bar: {this.props.bar}
      <br/>
      <hr/>
      <button className="btn btn-success" 
        onClick={this.update}>
        Update State
      </button>
    </div>);
  },componentWillMount: function() {
    writeToScreen('ComponentWillMount','warning');
  },componentDidMount: function() {
    writeToScreen('ComponentDidMount',shouldComponentUpdate: function() {
    writeToScreen('ShouldComponentUpdate','info');
    return true;
  },componentWillReceiveProps: function(nextProps) {
    writeToScreen('ComponentWillRecieveProps',componentWillUpdate: function() {
    writeToScreen('ComponentWillUpdate',componentDidUpdate: function() {
    writeToScreen('ComponentDidUpdate',componentWillUnmount: function() {
    writeToScreen('componentWillUnmount','danger');
  }
});

var App = React.createClass({
  getInitialState: function() {
      return {id: 1};
  },update: function() {
     writeToScreen('Updating Props','primary');
     this.setState({id: 2});  
  },render: function() {
    return (
      <div>
      <hr/>
      <Welcome bar={this.state.id} />
      <hr />
      <button type="button" className="btn btn-primary" 
        onClick={this.update}>
        Update Props
      </button>
  </div>
    )
  }
});

React.render(
  <App />,document.getElementById('app')
);

var unmountBtn = document.getElementById('unmount');
unmountBtn.addEventListener('click',unmount);

function unmount() {
  writeToScreen('Unmounting','primary');
  React.unmountComponentAtNode(document.getElementById('app'));
  unmountBtn.remove();
}

function writeToScreen(msg,level) {
    var elem = document.getElementById('screen');
    elem.innerHTML += '<div class="log bg-' + level + '">' + 
    '<span class="glyphicon glyphicon-ok"></span> &nbsp;&nbsp;' + 
      msg + 
    '</div>';
}

运行结果：
1. Initial
2. UpdateProps
3. UpdateState
4. unmount
5. whole

ReactJS组件的生命周期

猜你在找的React相关文章