幫你理清React的生命周期

wfc_666 發布于2019-08-29 17:25 / 1200人閱讀

摘要：推薦使用生命周期而不是該函數。這一生命周期返回的任何值將會作為參數被傳遞給。在更新發生后立即被調用。

這是一個從 印記中文 | react官方文檔 提取總結的，算是幫自己理清并且強化記憶React的生命周期，以便以后編寫組件的時候能夠有更清晰的思路。本文如有紕漏，歡迎指正

整體上來講，React生命周期分為了 掛載（裝配） 、更新、卸載以及捕錯四個狀態階段。每種狀態里需要執行若干個生命周期函數，這些函數可能會在不同的階段里重新被調用。

用流程圖來形象地歸納總結如下：

掛載（裝配）

這些方法會在組件實例創建和插入DOM中時被調用

1.constructor()

構造函數會在裝配前調用。

constructor(props){
    //...
}

2.static getDerivedStateFromProps()

組件實例化后和接受新屬性時調用，返回一個對象以更新狀態，或返回null表明不需要更新狀態

static getDerivedStateFromProps(nextProps,prevState)

3.componentWillMount()/UNSAFE_componentWillMount()

[UNSAFE_]componentWillMount()：裝配前立刻調用，發生在render()之前

17版前，這一生命周期函數名字都可以寫為componentWillMount()

4.render()

必須的鉤子函數，不應該改變組件的狀態，且不與瀏覽器交互

5.componentDidMount()

componentDidMount()：組件裝配后立刻調用，實現遠端網絡請求的地方

更新

屬性或狀態發生改變后，會觸發一次更新，組件重新渲染，下述方法會被調用。

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

在掛載了的組件接收到新屬性前調用。推薦使用getDerivedStateFromProps生命周期而不是該函數。

UNSAFE_componentWillReceiveProps(nextProps)

2. static getDerivedStateFromProps()

見掛載章節該鉤子

3. shouldComponentUpdate()

在掛載了的組件屬性變化和狀態變化時調用。通過控制返回的boolean值告訴React是否重新渲染該組件。

無法控制子組件的重新渲染與否

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

當接收到新屬性或狀態時，UNSAFE_componentWillUpdate()在渲染前被立即調用

UNSAFE_componentWillUpdate(nextProps, nextState)

注意

若shouldComponentUpdate()返回false，UNSAFE_componentWillUpdate()將不會被調用。

5. render()

見掛載章節該鉤子

6. getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染輸出提交給DOM前將會立即調用。它讓你的組件能在當前的值可能要改變前獲得它們。這一生命周期返回的任何值將會作為參數被傳遞給componentDidUpdate()。

getSnapshotBeforeUpdate(prevProps, prevState)

7. componentDidUpdate()

在更新發生后立即被調用。適合發送請求的地方

componentDidUpdate(prevProps, prevState)

卸載 1. componentWillUnmount()

componentWillUnmount()在組件被卸載和銷毀之前立刻調用。可以在該方法里處理任何必要的清理工作，例如解綁定時器，取消網絡請求，清理任何在componentDidMount環節創建的DOM元素。

錯誤處理 1. componentDidCatch()

錯誤邊界捕捉發生在子組件樹中任意地方的JavaScript錯誤,一個錯誤邊界并不能捕捉它自己內部的錯誤。

componentDidCatch(error, info)

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114318.html

幫你理清React的生命周期

摘要：推薦使用生命周期而不是該函數。這一生命周期返回的任何值將會作為參數被傳遞給。在更新發生后立即被調用。這是一個從印記中文 | react官方文檔提取總結的，算是幫自己理清并且強化記憶React的生命周期，以便以后編寫組件的時候能夠有更清晰的思路。本文如有紕漏，歡迎指正整體上來講，React生命周期分為了掛載（裝配）、更新、卸載以及捕錯四個狀態階段。每種狀態里需要...

itvincent 2019-08-23 13:45 評論0 收藏0
捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用，只跟實例的創建有關。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評論0 收藏0
淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
React Fiber 架構理解

摘要：架構理解引用原文是核心算法正在進行的重新實現。構建的過程就是的過程，通過來調度執行一組任務，每完成一個任務后回來看看有沒有插隊的更緊急的，把時間控制權交還給主線程，直到下一次回調再繼續構建。 React Fiber 架構理解引用原文：React Fiber ArchitectureReact Fiber is an ongoing reimplementation of Reacts...

Berwin 2019-08-23 16:32 評論0 收藏0