（1）react 生命週期

只有類元件有生命週期，函式元件沒有生命週期

1、掛載階段：這些方法會在元件例項被建立和插入DOM中時被呼叫：

1）constructor(props)

初始化元件的狀態、繫結方法，可以在建構函式中完成。
注意：狀態不會隨著屬性的更新而更新。為了保證屬性和狀態同步，通常需要狀態提升。

2） static getDerivedStateFromProps(nextProps, prevState)

元件例項化和接收新屬性時將會getDerivedStateFromProps。它應該返回一個物件來更新狀態，或者返回null來表明新屬性不需要更新任何狀態。
注意：

3）componentWillMount()

在元件掛載到DOM前呼叫，且只會被呼叫一次，在這邊呼叫this.setState不會引起元件重新渲染，也可以把寫在這邊的內容提前到constructor()中，所以專案中很少用。

4）render()

5）componentDidMount()

元件掛載到DOM之後執行，且只會被呼叫一次。
在這個方法中呼叫setState()將會觸發一次額外的渲染，但是它將在瀏覽器重新整理螢幕之前發生。這保證了即使render()將會呼叫兩次，但使用者不會看到中間狀態。謹慎使用這一模式，因為它常導致效能問題。然而，它對於像模態框和工具提示框這樣的例子是必須的。這時，在渲染依賴DOM節點的尺寸或者位置的檢視前，你需要先測量這些節點。

2、更新階段：屬性或狀態的改變會觸發一次更新

1）componentWillReceiveProps(nextProps)

在裝載的元件接收到新屬性前呼叫

若你需要更新狀態響應屬性改變（例如，重置它），可能你需對比this.props狀語從句：nextProps並在該方法中使用this.setState()處理狀態改變。
注意即使屬性未有任何改變，可能也會呼叫該方法，因此若你想要處理改變，請確保比較當前和之後的值。這可能會發生在當父元件引起你的元件重新渲染。

2） static getDerivedStateFromProps()

3）shouldComponentUpdate(nextProps, nextState)

當接收到新屬性或狀態時，shouldComponentUpdate()在渲染前被呼叫。預設為true。方法該不會並在初始化渲染或當使用forceUpdate()時被呼叫。
當前，若shouldComponentUpdate()返回false，而後componentWillUpdate()，render()和componentDidUpdate()將不會被呼叫

4）componentWillUpdate(nextProps, nextState)

當接收到新屬性或狀態時，componentWillUpdate會在渲染前被呼叫。
注意：不能再這裡呼叫this.State()，若你需要更新狀態響應屬性的調整，使用getDerivedStateFromProps()代替。
若shouldComponentUpdate()返回false，componentWillUpdate將不會被呼叫。

5）render()

6）getSnapshotBeforeUpdate()

在最新的渲染輸出提交給DOM前將會立即呼叫。它讓你的元件能在當前的值可能要改變前獲得它們，這一生命週期返回的任何職將會作為引數被傳遞給componentDidUpdate()

7）componentDidUpdate()

該方法會在更新發生後立即被呼叫。初始化時不會渲染。
當元件被更新時，使用該方法是操作DOM的一次機會。這也是一個適合傳送請求的地方，要是你對比了當前屬性和之前屬性（例如，如果屬性沒有改變那麼請求也就沒必要了）。
注意：若shouldComponentUpdate()返回false，componentDidUpdate()將不會被呼叫。

3、銷燬階段
1）componentWillUnmount()
componentWillUnmount()在元件被解除安裝和銷燬之前立刻呼叫。可以在該方法裡處理任何必要的清理工作，例如解繫結時器，取消網路請求，清理任何在componentDidMount環節建立的DOM元素。

2）componentDidCatch(error, info)
錯誤邊界是React元件，並不是損壞的元件樹。錯誤邊界捕捉髮生在子元件樹中任意地方的JavaScript錯誤，列印錯誤日誌，並且顯示回退的使用者介面。錯誤邊界捕捉渲染期間、在生命週期方法中和在它們之下整棵樹的建構函式中的錯誤。

如果定義了這一生命週期方法，一個類元件將成為一個錯誤邊界。在錯誤邊界中呼叫setState()讓你捕捉當前樹之下未處理的JavaScript錯誤，並顯示回退的使用者介面。只使用錯誤邊界來恢復異常，而不要嘗試將它們用於控制流。

（2）基於回撥的元件交流

import React, { Component } from 'react';

function Send(props){
    return (
        <div>
            <button onClick={props.changeMsg}>傳送訊息</button>
        </div>
    )
}
function Receive(props){
    return (
        <div>
            <p style={{display:'inline-block'}}>接收訊息:</p>
            <p style={{
                display:'inline-block',
                marginLeft:20
            }}>{props.msg}</p>
        </div>
    )
}
function Input(props){
    return (
        <input type="text" ref={props.getInput}/>
    )
}

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg:'天氣好',
            sunInput:''
        }
    }
    changeMsg=()=>{
        this.setState({
            //this.sunInput是獲取Input節點
            msg:this.sunInput.value
        })
    }
    render() {
        return (
            <div className="App">
                <Input getInput={el=>this.sunInput=el} />
                <Receive msg={this.state.msg}></Receive>
                <Send changeMsg={this.changeMsg}></Send>
            </div>
        );
    }
}

export default App;