1 理解生命周期
什么是react生命周期呢？當我們使用各種框架開發程序時，當這個框架啟動、程序剛運行時、各個頁面之間的交互、數據渲染到頁面上面、程序運行結束，應當會有個閉環的操作，而在這個環的起點和終點之間的各個節點，框架給給定一些特定函數供我們自行調用，方便我們執行一些操作，這便是生命周期。react也是如此。
附帶樣例源碼地址：github.com/JACK-ZHANG-…
2 react有哪些生命周期函數與作用
2.1 react 17版本之前
主要分為三個階段 初始化階段、更新階段、卸載組件。
- 初始化階段: 也稱為組件掛載時的階段，這個階段會執行我們在初次加載組件到組件第一次渲染在界面上面期間的一系列鉤子函數。
執行的流程為：constructor->componentWillMount->render->componentDidMount
-
constructor這是一個構造器，這里面可以接收一個父組件傳來的props然后初始化state值。
constructor(props) { super(props) this.state = { a: 0 } console.log('constructor執行了')}-
componentWillMount組件將要掛載，這個是在執行render之前會執行這個函數，也就說會在渲染瀏覽器dom之前執行這個函數，個人認為這個函數沒有多大實際意義，用的比較少。 -
render常用且重要的鉤子函數之一。在這里面我們會寫一些html標簽及自定義的函數，render執行完后便會將這些語句對應渲染到瀏覽器上面，用戶就可以看到我們寫的東西了。 -
componentDidMount常用的鉤子，組件掛載完畢執行，也就在render執行完之后之后，因為render執行了，瀏覽器的dom樹已經有了，所以我們便可以在這里操作dom和ref（react的一個特性，代替dom操作，因為react不提倡直接操作dom嘛）。通常在這個鉤子函數里面我們請求一些后端接口數據，來初次渲染我們頁面。
-
更新階段： 什么時候會執行更新階段這一系列的鉤子函數呢，那自然是我們在更新了state值的時候或者是接收到父組件props值的時候，就是
this.setState({})這個。這個階段常規流程是：componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
componentWillReceiveProps當子組件收到父組件傳過來的props，會執行這個函數。shouldComponentUpdate當更新state值的時候會執行這個函數，比如this.setState({})。componentWillUpdate執行render前的一個鉤子函數，里面會有兩個參數componentWillUpdate(nextProps, nextState)，這是將要渲染的props和state的值，在react17中將要棄用這個鉤子，執行this.forceUpdate()可以直接從這個鉤子函數節點開始執行。render和初始化時候執行的那個render一樣，只是這里是更新值的，所以dom節點會重新更新一下。componentDidUpdate組件更新完畢執行的鉤子函數。
-
卸載組件： 當組件卸載時執行的鉤子函數，這里只有一個，那就是
componentWillUnmount，一般我們在這個函數里面關閉一些定時器或其他收尾的操作。
2.2 react 17版本之后（包括）
在新的生命周期中，react棄用了componentWillMount、componentWillReceiveProps、componentWillUpdate這三個鉤子，取而代之的是getDerivedStateFromProps,其實就是把那三個鉤子的含義融入到了這一個鉤子中，寫法如下：
static getDerivedStateFromProps(props, state) { ? console.log('getDerivedStateFromProps---props, state:', props, state) ? // 如果return null 則依然以原來的規則更新state，否則會鎖定更新state ? return null ? // return {a:11} }另外還新增了一個鉤子，getSnapshotBeforeUpdate，這里可獲取到即將要更新的props和state
getSnapshotBeforeUpdate(prevProps, prevState) { ? console.log('getSnapshotBeforeUpdate---prevProps:,prevState:', prevProps, prevState) ? return null }其他和原來的生命周期一致。
3 react 函數組件中的hook 與 class組件生命周期函數的比較
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
在Hook中，我們寫的都是函數組件，也就沒有了類組件這些生命周期鉤子，但是取而代之的是Hook提供的一些鉤子，其含義也和類組件里面的生命周期函數類似，但是更好用，寫起來更方便。
比如：useState、useEffect等。
更多詳細的可以看官方文檔或其他文檔及視頻，這里只是提一下。
4 參考文章
- [1] React 官方文檔：zh-hans.reactjs.org/docs/state-…
- [2] 尚硅谷React教程 ：www.bilibili.com/video/BV1wy…
- [3] 南果梨.getDerivedStateFromProps[CP/OL].juejin.cn/post/684490…
