在完成對React的生命週期的修改後，我們看一下React的主要生命週期：

1. 在使用者輸入URL後，系統從App.jsx第一次進行裝載，在此過程中：

porps由父元件，傳給子元件；
state在介面中顯示的是預設值。

2. 在介面中，我們使用setState()函式進行更新時：

state更新為setState()中設定的值；
props通過父元件，把修改後的新值nextProps（如果修改了的話），傳遞給子元件。

在這些過程進行中，我們如果想加一些程式碼，如對新的數值進行過濾和判斷，或者其他的一些處理，我們就要使用React提供的一些函式：

componentWillMount();

componentDidMount();
componentWillUpdate();
componentDidUpdate();
componentWillReceiveProps();

我們還是以計算器為例，通過console.log()函式的列印內容，看看這些函式的執行的時間。

TablePage.jsx

import React, { Component } from 'react'
import { Button, Row, Col } from 'antd'

export default class componentName extends Component
 
 {
  constructor() {
    super();
    this.state = {
      num: 0
    }
  }

  componentWillMount = () => {
    console.log("---componentWillMount---")
  }
  componentDidMount = () => {
    console.log("---componentDidMount---")
  }
  componentWillUpdate = (nextProps, nextState) => {
    console.
 
log("---componentWillUpdate---, nextProps and nextState is ", nextProps, nextState)
  }
  componentDidUpdate = (prevProps, prevState) => {
   console.log("---componentDidUpdate---, prevProps and prevState is ", prevProps, prevState)
  }
  componentWillReceiveProps(nextProps) {
    console.log("---componentWillReceiveProps---", nextProps)
  }
  
  handleClick = () => {
    this.setState({
      num: this.state.num+1
    })
  }

  render() {
    console.log("---rendening---")
    return (
      <div>
        <Row>
          <Col span={24}>
          <p></p>
            <p>My num is {this.state.num}</p>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Button onClick={this.handleClick.bind(this)}>num++</Button>
          </Col>
        </Row>
      </div>
    )
  }
}

我們開啟瀏覽器的開發者工具：

當介面載入時，我們看一下這個執行的順序：

順序如下：

componentWillMount();
componentDidMount();
componentWillReceiveProps();
componentWillUpdate();
componentDidUpdate();

當我們點選按鈕時，函式的執行週期如下：

下面我們編寫一個工資計算器，來仔細的檢視一下這個過程：

• 首先，我們在TablePage.jsx定義兩個Input元件，分別為：月薪-monthlySalary和獎金-bonus輸入內容後，實時更新state；
• 其次，我們建立子元件TotalSalaryPage.jsx，將這兩個值，作為props，傳入子元件中，進行結果TotalSalary的計算：

TablePage.jsx

import React, { Component } from 'react'
import { Button, Row, Col, Input } from 'antd'

import TotalSalaryPage from './TotalSalaryPage'

export default class componentName extends Component {
  constructor() {
    super();
    this.state = {
      monthlySalary: 0,
      bonus: 0
    }
  }

  handleClick = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  handleSalaryChange = (e) => {
    this.setState({ monthlySalary: e.target.value })
  }
  handleBonusChange = (e) => {
    this.setState({ bonus: e.target.value })
  }

  render() {
    return (
      <div>
        <Row>
          <Col span={12}>
            monthlySalary is : <Input value={this.state.monthlySalary} onChange={this.handleSalaryChange.bind(this)} />
          </Col>
          <Col span={12}>
            bonus is : <Input value={this.state.bonus} onChange={this.handleBonusChange.bind(this)} />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <TotalSalaryPage
              monthlySalary={this.state.monthlySalary}
              bonus={this.state.bonus}
            />
          </Col>
        </Row>
      </div>
    )
  }
}

TotalSalaryPage.jsx

import React, { Component } from 'react'

export default class TotalSalaryPage extends Component {
  render() {
    return (
      <div>
        TotalSalary is : {parseInt(this.props.monthlySalary) * 12 + parseInt(this.props.bonus) }
      </div>
    )
  }
}

感興趣的同學，可以自己列印生命週期的幾個函式，看看執行過程，在此就不多作講解啦～
程式碼在GitHub上有：
https://github.com/Joker0219/Javascript/tree/master/React/demo06