資訊專欄INFORMATION COLUMN
摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用，只跟實例的創建有關。
前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來分析一下 React 生命周期的演變及原因，進一步理解其使用。
組件生命周期的四個階段Initialization （初始化階段：組件實例的創建）
Mounting （加載階段：組件插入 dom中）
Updating （更新階段：屬性或狀態每改變一次都將會觸發一次，組件重新渲染。）
Unmounting （卸載階段：組件卸載和銷毀）
老版生命周期（16.3之前的生命周期） Initialization （初始化階段：涉及4個鉤子函數）這些方法會在組件初始化的時候被調用，只跟實例的創建有關。
如果用createReactClass進行創建，則還有getInitialState這些生命周期函數，但很少使用，我們這里不提及。
定義默認props，會和父組件傳下來的props進行合并，且以父組件中的props優先級更高，相當于{...defaultProps, props}。
static propTypes{} （getInitialState()）定義props的數據類型，可以幫助我們確定其有效性，減少許多開發中不必要的錯誤。
constructor()在加載階段前調用一次，進行 state 的初始化。
constructor(props){
super(props)
}
super(props)用來調用父類的構建方法。
Mounting （加載階段：涉及3個鉤子函數） componentWillMount()新版中為UNSAFE_componentWillMount()。
只在組件加載時調用，整個生命周期只調用一次，以后組件更新也不會調用，此時可以修改 state。
render()react 中最重要的生命周期函數，創建虛擬 dom，并進行 diff 算法，更新 dom 樹也在此進行。所以不應該在此改變組件的狀態或者與瀏覽器進行交互。
注意：這個函數不能缺少，如果不創建虛擬 dom，可以return null。
componentDidMount()組件加載完成后立即調用，整個生命周期只調用一次，可以獲取到更新后的 DOM，在此處可以進行網絡請求等。
Updating （更新階段：涉及5個鉤子函數） componentWillReceiveProps()新版中為UNSAFE_componentWillReceiveProps()。
在組件加載后，如果有新的props傳遞過來，會先調用這個函數，可以在這里調用setState()修改state。
componentWillReceiveProps(nextProps)shouldComponentUpdate()
react中一個重要的性能優化點，組件接收到新的props或者state，返回true表示需要更新 dom，返回false阻止更新。
shouldComponentUpdate(nextProps, nextState)componentWillUpdate()
新版中為UNSAFE_componentWillUpdate()。
組件加載時不調用，只有在組件需要更新（即shouldComponentUpdate返回true）時調用。
componentWillUpdate(nextProps, nextState)
注意：不能在這個方法中調用setState()修改state。
render()同上。
componentDidUpdate()在組件更新完成后立即被調用，可以進行網絡請求等。
componentDidUpdate(prevProps, prevState)Unmounting （卸載階段：涉及1個鉤子函數） componentWillUnmount()
在組件被卸載和銷毀之前調用，可以在這里處理任何必要的清理工作，比如解除定時器，取消已經發起的網絡請求，清理在componentDidMount函數中創建的 DOM 元素。
componentWillUnmount()Error Handling（錯誤處理：涉及1個鉤子函數） componentDidCatch()
錯誤邊界捕獲，在v16.0剛推出的時候新增加的一個生命周期函數，用于捕獲在子組件樹中任意地方發生的 JavaScript 錯誤，一個錯誤邊界不能捕獲它自己內部的錯誤。
componentDidCatch(error, info)組件的基本寫法
import React, {Component} from "React"
export default class OldReactComponent extends Componet{
static defaultProps={}
static propTypes={}
constructor(props){
super(props)
}
state={}
componentWillMount(){}
render(){
return null
}
componentDidMount(){}
componentWillReceivePorps(nextProps){}
componentShouldUpdate(nextProps,nextState){
return true
}
componentWillUpdate(nextProps,nextState){}
componentDidUpdate(){}
componentWillUnmount(){}
}
新版生命周期（16.4之后的生命周期）
（帶UNSAFE_的函數在以后將會被丟棄，官方也不建議使用，這里不再列出。）
新版本中，新增了三個生命周期函數：
static getDerivedStateFromProps()
getSnapshotBeforeUpdate
static getDerivedStateFromError()
同時deprecate了一組生命周期API，包括：
componentWillReceiveProps
componentWillMount
componentWillUpdate
可以看出除了shouldComponentUpdate之外，render 之前的所有生命周期都被消滅了。原因是這些生命周期太多時候沒有被正確使用，而且在Fiber之后，如果要開啟async rendering，在render函數之前的所有函數，都有可能被執行多次。
Initialization （初始化階段：涉及4個鉤子函數）同上。
Mounting （加載階段：涉及3個鉤子函數） static getDerivedStateFromProps()因為是靜態方法，所以無法訪問到組件實例。每次組件調用render前都會被調用，獲取新的props和state（v16.3只會為props的而調用，v16.4修正為props和state)之后，返回一個對象作為新的state，如果返回null則表示不需要更新；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法。并且它應該是個純函數，沒有副作用(side effect)。
static getDerivedStateFromProps(props,state)render()
同上。
componentDidMount()同上。
Updating （更新階段：涉及5個鉤子函數） static getDerivedStateFromProps()同上。
shouldComponentUpdate()同上。
render()同上。
getSnapshotBeforeUpdate()觸發時間: update發生的時候，在render之后，在組件dom渲染之前；返回一個值，作為componentDidUpdate的第三個參數；配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法，常用于 scroll 位置的定位。
getSnapshotBeforeUpdate(prevProps, prevState)componentDidUpdate()
同上。
Unmounting （卸載階段：涉及1個鉤子函數） componentWillUnmount()同上。
Error Handling（錯誤處理：涉及2個鉤子函數） componentDidCatch()同上。
static getDerivedStateFromError()用于在“render”階段（非render函數）的錯誤捕獲，應該是個純函數，沒有副作用(side effect)。
static getDerivedStateFromError(error)組件的基本寫法
import React, {Component} from "React"
export default class OldReactComponent extends Componet{
static defaultProps={}
static propTypes={}
constructor(props){
super(props)
}
state={}
static getDerivedStateFromProps(props,state){}
render(){
return null
}
componentDidMount(){}
componentShouldUpdate(nextProps,nextState){
return true
}
getSnapshotBeforeUpdate(prevProps, prevState){}
componentDidUpdate(){}
componentWillUnmount(){}
}
總結
React新的生命周期新增static getDerivedStateFromProps、getSnapshotBeforeUpdate并棄用componentWillMount，componentWillReceiveProps，componetWillUpdate（這三個函數將在 React 17中刪除）。
新增static getDerivedStateFromError捕獲“render”階段的錯誤。
參考幫你理清React的生命周期React-新的生命周期（React16版本）
React v16.3之后的組件生命周期函數
清晰大圖請點擊這里
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101888.html
摘要：常聽到服務器端渲染和瀏覽器端渲染這兄弟倆，一直不是很理解，尤其對于我這種沒有后臺開發經驗的小白來說，理解起來異常困難，最近花時間查了很多資料，總算弄明白了，于是整理下，加深記憶。 常聽到服務器端渲染和瀏覽器端渲染這兄弟倆，一直不是很理解，尤其對于我這種沒有后臺開發經驗的小白來說，理解起來異常困難，最近花時間查了很多資料，總算弄明白了，于是整理下，加深記憶。這邊文章是參考下面的文章做的總...
摘要：常聽到服務器端渲染和瀏覽器端渲染這兄弟倆，一直不是很理解，尤其對于我這種沒有后臺開發經驗的小白來說，理解起來異常困難，最近花時間查了很多資料，總算弄明白了，于是整理下，加深記憶。 常聽到服務器端渲染和瀏覽器端渲染這兄弟倆，一直不是很理解，尤其對于我這種沒有后臺開發經驗的小白來說，理解起來異常困難，最近花時間查了很多資料，總算弄明白了，于是整理下，加深記憶。這邊文章是參考下面的文章做的總...
摘要：以上函數默認會對一個數字組成的數組進行按數字面值大小排序下午雷學委列表的其他函數持續學習持續開發效果如下，讀者可以仔細看看是否如學委所說。 正式的Python專...
摘要：特點，永久免費，數據中心多達個，之前好用的首爾和東京因為眾多的涌入導致線路擁堵不堪此外機型可自由分配個，內存，最大空間容量和的帶寬。是烏克蘭官方為個人提供的免費二級域名后綴，任何人都可以申請。由烏克蘭官方運行，穩定性有保障。作為一個mjj，最喜歡做的事情就是薅羊毛，這篇文章就來整理一些特別優質的，不容錯過的羊毛！算是薅羊毛的一個指南！！ 一：永久VPS篇 這里整理一些永久...
摘要：這也解答了我曾經的一個疑問同樣的道理，在調用屬性的瞬間，也是使用先來實例化一個對象，所以那一瞬間他們的構造函數以及原型對象是相同的，但也僅僅是那一瞬間。 經常在國內的各大網站博客上看到一句話，叫做JS中萬物皆對象，那是否真是如此？ 那么，我們先來捋一捋JS中的數據類型，JS中的數據類型有下面幾種 Undefined Null Boolean Number String Symbol ...
閱讀 1588·2019-08-30 13:18
閱讀 1577·2019-08-29 12:19
閱讀 2094·2019-08-26 13:57
閱讀 4137·2019-08-26 13:22
閱讀 1179·2019-08-26 10:35
閱讀 2991·2019-08-23 18:09
閱讀 2500·2019-08-23 17:19
閱讀 676·2019-08-23 17:18
