React教程11: Component组件的生命周期( Life Cycle)

React教程11: Component组件的生命周期( Life Cycle)

这篇教程是关于React的component 生命周期的方法。

生命周期方法

  • componentWillMount 在显示在页面上之前执行,包括server和client端。
  • componentDidMount 在第一次页面显示后执行,只在client端。这里会有AJAX 和 DOM 或者 state 更新。这一方法可以和其他JavaScript 框架或功能结合使用,setTimeoutor setInterval. 我们使用这个方法来更新state,这样我们可以引发其他生命周期方法。
  • componentWillReceiveProps 当props更新后,另一个render还没有执行前执行。当我们更新state时,我们通过 setNewNumber 来触发这个方法。
  • shouldComponentUpdate 返回 true 或者 false 。它决定了component是否更新。默认为 true。如果你肯定component 在state props 更新后不需要render,你可以使用 false
  • componentWillUpdate 在render前执行。
  • componentDidUpdate 在render后执行。
  • componentWillUnmount 在component从 dom 中解除后执行。我们在 main.js 中解除component。

下面例子中,我们在construction方法中设置初始 statesetNewnumber 用来更新 state. 其他本教程中提到的component生命周期方法都在 Content component中。

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);
初始化render后,我们得到下面效果。
react-component-lifecycle-initial-screen

只有 componentWillMountcomponentDidMount 出现在log console中,因为我们没有更新任何内容。
react-component-lifecycle-initial-log
当我们点击 INCREMENT 按钮后, 更新相关的React生命周期方法,如:componentWillReceivePropscomponentWillUpdatecomponentDidUpdate 会触发。
react-component-lifecycle-change-log
10秒钟后, component会解除,最后一个方法的log会出现在console上。
 react-component-lifecycle-unmount-log

注意点

生命周期方法的触发是按照固定的顺序的。所以在写代码时候最好是按例子中的顺序来写。

发表评论

您的电子邮箱地址不会被公开。