ReactJS组件的生命周期

最新推荐文章于 2025-04-17 09:56:26 发布

SerenoShen

最新推荐文章于 2025-04-17 09:56:26 发布

阅读量555

点赞数 1

分类专栏： JavaScript开发+学习记录 ReactJS 文章标签： react-js 组件生命周期 react组件 component

本文链接：https://blog.youkuaiyun.com/shenlei19911210/article/details/77503087

版权

JavaScript开发+学习记录同时被 2 个专栏收录

68 篇文章

订阅专栏

ReactJS

2 篇文章

订阅专栏

本文通过一个详细的示例展示了ReactJS中组件的完整生命周期，包括从初始化到卸载过程中的各个阶段，并通过代码运行结果直观地解释了每个生命周期方法的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看看官方给出的示例图，然后我们在通过代码来实际感受一下：
这里写图片描述

为了理解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', 'warning');
  },

  shouldComponentUpdate: function() {
    writeToScreen('ShouldComponentUpdate', 'info');
    return true;
  },

  componentWillReceiveProps: function(nextProps) {
    writeToScreen('ComponentWillRecieveProps', 'warning');
  },

  componentWillUpdate: function() {
    writeToScreen('ComponentWillUpdate', 'warning');
  },

  componentDidUpdate: function() {
    writeToScreen('ComponentDidUpdate', 'warning');
  },

  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>';
}