ReactJS组件生命周期

在本章中，我们将讨论组件生命周期方法。

生命周期方法

componentWillMount 在呈现之前在服务器端和客户端执行。
componentDidMount 仅在客户端的第一次渲染之后执行。这是AJAX请求和DOM或状态更新应该发生的地方。此方法还用于与其他JavaScript框架和任何延迟执行的函数（如 setTimeout 或 setInterval） 进行集成。我们正在使用它来更新状态，以便我们可以触发其他生命周期方法。
componentWillReceiveProps 会在调用另一个渲染之前更新道具后立即调用。当我们更新状态时，我们从 setNewNumber中 触发它。
shouldComponentUpdate 应该返回 true 或 false 值。这将决定组件是否将被更新。默认设置为 true 。如果确定组件在状态或道具更新后不需要渲染，则可以返回 false 值。
componentWillUpdate 在渲染之前被调用。
componentDidUpdate 在渲染之后立即被调用。
componentWillUnmount 组件从DOM卸除后调用。我们正在卸载 main.js中 的组件。

在下面的例子中，我们将在构造函数中设置初始状态。该 setNewnumber 用于更新的状态。所有的生命周期方法都在内容组件中。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

在初始渲染之后，我们将获得以下屏幕。

React组件生命周期初始屏幕

只有 componentWillMount 和 componentDidMount 将被记录在控制台中，因为我们还没有更新任何东西。

React组件生命周期初始日志

当我们点击 INCREMENT 按钮时，会发生更新并触发其他生命周期方法。

React组件生命周期更改日志

十秒后，组件将被卸载并且最后的事件将被记录在控制台中。

React组件生命周期卸载日志

注 - 生命周期方法将始终以相同的顺序调用，因此最好按照示例中所示的正确顺序编写它。