【3-2-1】
掛載階段【3】constructor / render / componentDidMount
更新階段【2】render / componentDidUpdate
卸載階段【1】componentWillUnmount
【一個特殊的生命周期】shouldComponentUpdate
1、constructor()
構(gòu)造器函數(shù)，它的入?yún)⑹?b>props（由父組件傳遞過來的自定義屬性和children）
第一行代碼必須是 super(props)，調(diào)用父類的構(gòu)造器函數(shù)
組件自有的state只能在這里定義（先定義后使用），state就是所謂的聲明式變量
四個不要
在這里不能修改props，在這里也不能用props來做運算。
在這里不要把props和state交叉賦值（運行），在React代碼邏輯，永遠要保持props和state的獨立性。
在這里不要使用this.setState()修改state
一般情況下，不要在這里寫業(yè)務邏輯，比如DOM、BOM操作等都不要在這里做。
有時候我們需要改變this指向時，可以這里做
2、componentDidMount()
相當于vue中mounted()，表示掛載階段已完成。
各種業(yè)務邏輯（DOM操作、ref操作、調(diào)接口、開定時器）等都可以在這個做。
在這里可以this.setState()，默認還是異步的。
3、shouldComponentUpdate()
這個生命周期相當于一個用于控制更新的“開關”
這個生命周期只會影響更新階段，不會影響其它階段。
注意：如果你用到了這個生命周期，無論里面的邏輯多么復雜，都返回返回一個布爾值。
使用場景：舉個例子，state中有10個聲明式變量，但只有9個變量參與了視圖渲染，還有1個變量與視圖渲染沒有任何關系。當有人使用this.setState()來修改這個與視圖渲染無關的變量時，這將也會觸發(fā)render()返回新的JSX，白白地浪費了性能。所以這個生命周期是React給出的一種性能優(yōu)化方案。
這個優(yōu)化方案要考慮props和state兩重數(shù)據(jù)流對視圖渲染的影響，這個優(yōu)化方案異常復雜，所以實踐工作中幾乎沒人用。
【現(xiàn)在】React官方提供了一個 PureComponent 構(gòu)造類，徹底地解決上述這個難以解決的優(yōu)化問題。
this.forceUpdate()它會繞過這個生命周期。shouldComponentUpdate對this.forceUpdate()不影響。
如果需要做優(yōu)化的state越多，這里的優(yōu)化邏輯將越復雜。如果新count != 舊count，這說明count變了
4、componentDidUpdate()
相當于vue中的updated()，表示更新階段已完成。
在當前組件中，有三種方式觸發(fā)更新階段：props變化、this.setState()、this.forceUpdate()
使用場景：this.setState()這個異步工作完成時，我們?nèi)プ隽硪患莚ender的事件。
在這里可以使用this.setState()，但必須給終止條件。（你可以想一想遞歸）
這個生命周期，是更新階段的，發(fā)生在render()之后。
5、componentWillUnmount()
相當于vue中beforeDestroy()，表示當前組件即將被銷毀
在這里一般用于清除定時器、長連接、清緩存等
在這里可以調(diào)用this.setState()，但毫無意義。
6、render()
這個生命周期，是React所有生命周期中必須要有的。
這個生命周期橫跨兩個階段，在掛載階段和更新階段都執(zhí)行。
組件初始化、this.setState時、this.forceUpdate時、props變化時，它會執(zhí)行
在更新階段，如果當前有shouldComponentUpdate并返回false時，render()將不執(zhí)行
在掛載階段，render()一定會執(zhí)行，shouldComponentUpdate不影響render()。
特別提醒：
1、在“自定義渲染方法”中不能使用this.setState()。
2、在render()內(nèi)部、return()之間，不能使用到this.setState()
3、在JSX中不能調(diào)用this.setState()方法。
render() 方法一定要返回 ReactNode，不能返回void。
