本文例項講述了react 生命週期。分享給大家供大家參考，具體如下：

元件掛載：

componentWillMount(元件將要掛載到頁面)->render(元件掛載中)->componentDidMount（元件掛載完成後）

元件更新：

1、shouldComponentUpdate(render之前執行，引數為ture時執行render,為false時不執行render)

componentWillUpdate(shouldComponentUpdate之後執行)

componentDidUpdate(render之後執行)

順序：shouldComponentUpdate-》componentWillUpdate-》render-》componentDidUpdate

import React,{ Component,Fragment } from 'react';
import List from './List.js';
 
class Test extends Component {
  constructor(props) {
    super(props);
    this.state={
      inputValue:'aaa',list:['睡覺','打遊戲'],}
    // this.add=this.add.bind(this);
  }
 
  addList() {
    this.setState({
      list:[...this.state.list,this.state.inputValue],inputValue:''
    })
  }
 
  change(e) {
    this.setState({
      // inputValue:e.target.value
      inputValue:this.input.value
    })
  }
 
  delete(i) {
    // console.log(i);
    const list = this.state.list;
    list.splice(i,1);
    this.setState({
      list:list
    })
  }
 
  //元件將要掛載到頁面時
  componentWillMount() {
    console.log('componentWillMount');
  }
 
  //元件完成掛載後
  componentDidMount() {
    console.log('componentDidMount');
  }
 
  //元件被修改之前，引數為ture時執行render,為false時不往後執行
  shouldComponentUpdate() {
    console.log('1-shouldComponentUpdate');
    return true;
  }
 
  //shouldComponentUpdate之後  
  componentWillUpdate() {
    console.log('2-componentWillUpdate');
  }
 
  //render執行之後
  componentDidUpdate() {
    console.log('4-componentDidUpdate');
  }
 
 
  //元件掛載中
  render() { 
    console.log('3-render');
    return (
      <Fragment>
      <div>
        <input ref={(input)=>{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
        <button onClick={this.addList.bind(this)}>新增</button>
      </div>
      <ul>
        {
          this.state.list.map((v,i)=>{
            return(
                <List key={i} content={v} index={i} delete={this.delete.bind(this)} />
            );
          })
        }
      </ul>
      </Fragment>
    );
  }
}
 
export default Test;

2、componentWillReceiveProps(子元件中執行。元件第一次存在於虛擬dom中，函式不會被執行，如果已經存在於dom中，函式才會執行)

componentWillUnmount(子元件在被刪除時執行)

import React,{ Component } from 'react';
import PropTypes from 'prop-types';
 
class List extends Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
  }
  
  //元件第一次存在於虛擬dom中，函式不會被執行
  //如果已經存在於dom中，函式才會執行
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }
 
  //子元件被刪除時執行
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
 
  render() { 
    return (
    <li
    onClick={this.delete}>{this.props.name}{this.props.content}</li>
    );
  }
 
  delete=() => {
    this.props.delete(this.props.index);
  }
}
 
List.propTypes={
  name:PropTypes.string.isRequired,content:PropTypes.string,index:PropTypes.number,delete:PropTypes.func
}
 
//設定預設值：
 
List.defaultProps={
  name:'喜歡'
}
 
export default List;

元件效能優化：

import React,{ Component } from 'react';
import PropTypes from 'prop-types';
 
class List extends Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
  }
  
  //元件第一次存在於虛擬dom中，函式不會被執行
  //如果已經存在於dom中，函式才會執行
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }
 
  //子元件被刪除時執行
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
 
  shouldComponentUpdate(nextProps,nextState) {
    if (nextProps.content !== this.props.content) {
      return true;
    } else {
      return false;
    }
  }
 
  render() { 
    return (
    <li
    onClick={this.delete}>{this.props.name}{this.props.content}</li>
    );
  }
 
  delete=() => {
    this.props.delete(this.props.index);
  }
}
 
List.propTypes={
  name:PropTypes.string.isRequired,delete:PropTypes.func
}
 
//設定預設值：
 
List.defaultProps={
  name:'喜歡'
}
 
export default List;

希望本文所述對大家react程式設計有所幫助。