react生命周期

Jason_Geng 發布于2019-08-23 15:10 / 617人閱讀

摘要：生命周期，一直只關心自己常用的那幾個，雖然基本能解決的問題，但是當被問到的時候，說的不清不楚還是讓我很慚愧，所以今天我就專門來梳理一下的生命周期執行場景執行之前詳細不會觸發重復渲染，只執行一次執行場景之后之后詳情只能通過訪問數據不能修改可

react生命周期，一直只關心自己常用的那幾個，雖然基本能解決99%的問題，但是當被問到的時候，說的不清不楚還是讓我很慚愧，所以今天我就專門來梳理一下react的生命周期

1、componentWillMount()

執行場景：render()執行之前

詳細： setState()不會觸發re-render重復渲染，只執行一次

2、render()

執行場景： componentWillMount() 之后/ componentWillReceive(nextProps, nextState)之后

詳情：只能通過this.props,this.state訪問數據不能修改、可以反回null，false 或則任何React組件、
不能改變組件狀態、不能修改Dom的輸出

注意：render
方法反回的不是真實的Dom元素，而是一個虛擬的表現，類似于一個Dom-Tree的結構對象，react之所以效率高就是這個原因

3、componentDidMount()

執行場景：render()以后立即執行

詳情：可以對Dom進行操作通常在這里加載服務器數據可以setState觸發重新渲染只執行一次

4、componentWillReceiveProps(nextProps)

執行場景：在已經掛載的組件接收到新的props時觸發，可以理解為除了第一次生命周期（componentWillMount ->
render -> componentDidMount）之后的生命周期觸發

詳情：只有當從外部傳入的props發生變化時才會觸發，setState是不會觸發的

注意：
由于組件可能會在props傳入即使沒有發生改變也會觸發重新渲染，所以如果你想自己處理改變最好對當前props值和下一次值進行比較，避免觸發不必要的渲染

5、shouldComponentUpdate(nextProps,nextState)

執行場景：在接收新的props或者state時觸發

詳情：這個函數的作用是為了讓我們自己能夠控制組件是否重新渲染從而優化組件，默認返回true表示需要重新渲染

注意：首次渲染時不會觸發，函數如果返回false是不會觸發重新渲染的（componentWillUpdata -> render -> componentDidUpdate）是不會被觸發的

6、componentWillUpdate(nextProps, nextState)

執行場景： props或state發生改變時，shouldComponentUpdata 返回true時觸發

注意：不可以在這里調用setState 如果需要響應props可以到componentWillReceiveProps()中做響應

7、componentDidUpdate(prevProps, prevState)

執行場景：在componentWillUpdate -> render 以后

注意：該方法可以操作Dom，但是組件初始時不會調用

8、componentWillUnmount()

執行場景：在組件卸載或銷毀之前調用

詳情：這個方法主要用于一些清理工作，比如無效的timers, interval, 或則取消網絡請求
清理任何componentWillMount()中創建的Dom元素。

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

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

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

React專題：生命周期

摘要：而生命周期鉤子，就是從生到死過程中的關鍵節點。異步渲染下的生命周期花了兩年時間祭出渲染機制。目前為這幾個生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個大活寶。生命周期鉤子的最佳實踐是在這里初始化。本文是『horseshoe·React專題』系列文章之一，后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個人博客獲得無與倫比的閱讀體驗生命周期...

Hanks10100 2019-08-23 11:25 評論0 收藏0
捋一捋React的生命周期

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

MobService 2019-08-23 15:20 評論0 收藏0
ReactV16.3，即將更改的生命周期

摘要：我們目前的計劃是為不安全生命周期引入別名，和。從現在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應更改的推薦方法是使用新的靜態生命周期。注釋：本文是根據React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對之前生命周期所出現的問題的總結，之后的React將逐步棄用一些生命周期和...

wendux 2019-08-22 16:28 評論0 收藏0
React組件生命周期詳解

摘要：組件生命周期構造方法是對類的默認方法，通過命令生成對象實例時自動調用該方法。該生命周期可以發起異步請求，并。后廢棄該生命周期，可以在中完成設置渲染組件是一個組件必須定義的生命周期，用來渲染。該生命周期內可以進行。 React組件生命周期 constructor( ) 構造方法 constructor是ES6對類的默認方法，通過 new 命令生成對象實例時自動調用該方法。并且，該方法是...

learn_shifeng 2019-08-22 17:31 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評論0 收藏0
React組件生命周期

摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。每個生命周期階段調用的鉤子函數會略有不同。 React組件生命周期此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。所有如果在React@17 發布之前，這篇文章還是適用的。新的生命周期請看官...

mgckid 2019-08-20 10:42 評論0 收藏0