react組件生命周期理解

Rango 發(fā)布于2019-08-21 11:53 / 1957人閱讀

摘要：當組件要被卸載之前，框架會調用函數，之后就會卸載組件。開發(fā)者可以在這幾個生命周期函數中定義一些你想組件變化的操作或者做一些數據的改變。

react組件有兩個狀態(tài)，一個是渲染狀態(tài)，一個是卸載狀態(tài)，而渲染狀態(tài)又分為初始渲染狀態(tài)（也可以說是創(chuàng)建狀態(tài)）和重新渲染狀態(tài)（也可以說是存在狀態(tài)，說明組件一直存在，會發(fā)生多次重新渲染）。這三個狀態(tài)下又會產生一系列的生命周期函數，開發(fā)人員一般只需要了解其中五個主要的生命周期函數：componentWillMount、componentDidMount、componentWillUpdate、componentDidUpdate、componentWillUnmount。一下是圖解：

下面詳細解釋一下上圖。首先，在組件初始渲染之前react native框架會調用componentWillMount函數，在組件生命周期中，它只會被執(zhí)行一次（注：如果組件需要從本地存儲中獲取數據，可以在該函數中執(zhí)行獲取本地存儲數據操作）；執(zhí)行完componentWillMount函數之后，組件就會執(zhí)行初始渲染；當初始渲染完成后，react native框架會立即調用componentDidMount函數，同樣的，該函數在生命周期中也只會執(zhí)行一次（注：組件可以在該函數中執(zhí)行從網絡中獲取數據操作）；這兩步之后，組件就初始渲染出來了；當組件從父組件中接收到新的prop、組件的prop在父組件中被更改、或者組件的state變量改變時，只要這三個有發(fā)生一種，react native框架就會觸發(fā)diff算法計算該組件是否有改動，如果有改動，組件就會被重新渲染，重新渲染之前，react native框架會調用componentWillUpdate函數（注：該函數中不能對組件狀態(tài)進行更改）；之后，組件便會執(zhí)行重新渲染；重新渲染完成之后，react native框架會調用componentDidUpdate函數；重新渲染這個狀態(tài)會被多次觸發(fā)，所以這兩個函數也會被執(zhí)行多次。當組件要被卸載之前，react native框架會調用componentWillUnMount函數，之后就會卸載組件。
開發(fā)者可以在這幾個生命周期函數中定義一些你想組件變化的操作或者做一些數據的改變。

最后提醒一點，diff算法是react native用于實現虛擬dom機制實現的一種算法，虛擬dom機制是react native實現對數據批量處理反應迅速的基礎，建議朋友們有必要去理解透徹。之后的文章中，本人也會進行介紹，大家共勉交流一下，嘻嘻~

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

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

轉載請注明本文地址：http://systransis.cn/yun/87247.html

React.js 小書 Lesson20 - 更新階段的組件生命周期

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

Yumenokanata 2019-08-21 17:34 評論0 收藏0
簡單談談我理解的React組件生命周期

摘要：用處你在組建中所有的移除所有組建中的監(jiān)聽生命周期父子組件渲染順序父組件代碼引入子組件子組件代碼瀏覽器中的執(zhí)行結果如下圖結論所以在的組件掛載及過程中，最底層的子組件是最先完成掛載及更新的。原文首發(fā)在我的個人博客：歡迎點此訪問我的個人博客學了一段時間的react了，現在對自己學習的react的生命周期做一個簡單總結（如有錯誤請留言指正，謝謝） react一共有如下幾個生命周期函數 c...

lowett 2019-08-26 11:36 評論0 收藏0
React的生命周期到底是怎么一回事？

摘要：在中，組件基本由三個部分組成屬性狀態(tài)以及生命周期方法。在生命周期中是必須的，是渲染組件用的。返回就是緊接著以下的生命周期函數返回表示組件不需要重新渲染，不再執(zhí)行任何生命周期函數包括。生命周期流程圖原文地址盡量全面詳細的整理一下React的生命周期中的知識點。組件組件是獨立的封裝的可以復用的一個小部件，它是React的核心思想之一。通過劃分組件，可以將一個頁面劃分成獨立的多個可復用...

sutaking 2019-08-22 11:08 評論0 收藏0
React16 生命周期理解

摘要：完整生命周期初始化參數第一次渲染當父組件向子組件傳入發(fā)生改變后，依次調用子組件更新渲染當組件自身發(fā)生變化后組件再次更新渲染當組件卸載生命周期詳解此處請求接口數據子組件獲得新時觸發(fā)，作用是在子組件再次渲染前，更新子組件自身的，之后會觸發(fā)接受的完整生命周期 constructor(props) // 初始化參數 componentWillMount() render() // 第一次...

Flands 2019-08-23 14:38 評論0 收藏0
淺析 React 生命周期

摘要：在使用組件的進行組件實例化時，得到的便是其返回值。也就是說，如果其子組件的或發(fā)生改變時，只會取決于那個組件的方法的返回值。文章為本人原創(chuàng)，原文見本人個博淺析生命周期一淺析生命周期二 Overview 最近常有學習React相關的技術，寫了幾個React的小Demo，使用 React/Express 技術棧。實在太小，羞于拿出來細說。React 的確是一個值得追隨的技術。但React體系...

lansheng228 2019-08-20 14:15 評論0 收藏0