成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react之生命周期淵源

qingshanli1988 / 3534人閱讀

摘要：組件是否應當渲染新的或，返回表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)。組件銷毀生命周期函數(shù)的淵源自定義組件的生命周期主要通過三種狀態(tài)進行管理，它們負責通知組件當前所處的狀態(tài)，應該執(zhí)行生命周期中的哪個步驟，是否可以更新。

生命周期有哪些以及用法 首次實例化

getDefaultProps
作用于組件類，只調(diào)用一次，返回對象用于設(shè)置默認的props，對于引用值，會在實例中共享

getInitialState
作用于組件的實例，在實例創(chuàng)建時調(diào)用一次，用于初始化每個實例的state，此時可以訪問this.props。

componentWillMount
在完成首次渲染之前調(diào)用，此時仍可以修改組件的state。

reader
必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：
只能通過this.props和this.state訪問數(shù)據(jù)
可以返回null、false或任何React組件
只能出現(xiàn)一個頂級組件（不能返回數(shù)組）
不能改變組件的狀態(tài)

componentDidMount
真實的DOM被渲染出來后調(diào)用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可 以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調(diào)用。

實例化之后完成的更新

getInitialState

componentWillMount

render

componentDidMount

組件已存在時的狀態(tài)改變

componentWillReciveProps
組件接收到新的props時調(diào)用，并將其作為參數(shù)nextProps使用，此時可以更改組件props及state。

shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時，可通過該方法進行適當?shù)膬?yōu)化。
在首次渲染期間或者調(diào)用了forceUpdate方法后，該方法不會被調(diào)用

componentWillUpdate
接收到新的props或者state后，進行渲染之前調(diào)用，此時不允許更新props或state。

render

componentDidUpdate
完成渲染新的props或者state后調(diào)用，此時可以訪問到新的DOM元素。

組件銷毀

componentWillUnmount

生命周期函數(shù)的淵源

自定義組件（ReactCompositeComponent）的生命周期主要通過三種狀態(tài)進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它們負責通知組件當前所處的狀態(tài)，應該執(zhí)行生命周期中的哪個步驟，是否可以更新 state。三個狀態(tài)對應三種方法，分別為：mountComponent、updateComponent、unmountComponent，每個方法都提供了兩種處理方法

getDefaultProps

這個生命周期函數(shù)是在組件初始化構(gòu)造函數(shù)中執(zhí)行，所以只執(zhí)行一次

// 構(gòu)造函數(shù)
    var Constructor = function(props, context) {
      this.props = props;
      this.context = context;
      this.state = null;
      var initialState = this.getInitialState ? this.getInitialState() : null;
      this.state = initialState;
    };

狀態(tài)一：MountComponent

由于react構(gòu)建的是虛擬DOM所以要準備開始渲染頁面之前拿到的虛擬的DOM，需要經(jīng)過組裝之后然后給到瀏覽器，在這里會發(fā)生：首先會通過getInitialState拿到初始化的數(shù)據(jù)

  // 當前狀態(tài)為 MOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;

  // 當前元素對應的上下文
  this.context = this._processContext(this._currentElement._context);

  // 當前元素對應的 props
  this.props = this._processProps(this.props);

  // 獲取初始化 state
  this.state = this.getInitialState();

然后判斷如果有componentwillMount就會運行這里的js語法，在這里如果有state發(fā)生變化不會馬上出發(fā)render而是與initialState進行，組成新的state；這里渲染的時候是通過遞歸的方式進行渲染所以父組件的componentWillMount在子組件的componentWillMount之前執(zhí)行，而子組件的componentDidMount在父組件的componentDidMount之前執(zhí)行，這塊可能有點繞，直接上代碼

// render 遞歸渲染
  var markup = this._renderedComponent.mountComponent(
    rootID,
    transaction,
    mountDepth + 1
  );

這樣就把dom與state以及props數(shù)據(jù)拿到就可以完整的進行渲染

最后判斷是否有componentDidMount，如果有會執(zhí)行這里的js

狀態(tài)二：receive Props

updateComponent 負責管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

compnentWillReciveProps中setState在componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中還是無法獲取到更新后的 this.state，即此時訪問的this.state 仍然是未更新的數(shù)據(jù)，只有在 render 和 componentDidUpdate 中才能獲取到更新后的this.state。

禁止在 shouldComponentUpdate 和 componentWillUpdate 中調(diào)用 setState，會造成循環(huán)調(diào)用，直至耗光瀏覽器內(nèi)存后崩潰。(如果在 shouldComponentUpdate 或 componentWillUpdate 中調(diào)用 setState，此時的狀態(tài)已經(jīng)從 RECEIVING_PROPS -> NULL，則 performUpdateIfNecessary 就會調(diào)用 updateComponent 進行組件更新，但 updateComponent 又會調(diào)用 shouldComponentUpdate 和 componentWillUpdate，因此造成循環(huán)調(diào)用，使得瀏覽器內(nèi)存占滿后崩潰。)

狀態(tài)三：unMountComponent

在 componentWillUnmount 中調(diào)用 setState，是不會觸發(fā) reRender。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92547.html

相關(guān)文章

  • React入門0x018: 高階函數(shù)組件(HOC)

    摘要：總結(jié)其實，這個和的思想有很大的淵源，不推薦繼承，而是推薦組合，而就是其中的典范。比如我們寫了兩個個高階組件，一個是，一個是，組件就可以隨意的在和之間隨意切換，而不需要改動組件原有代碼。 0x000 概述 高階函數(shù)組件...還是一個函數(shù)，和函數(shù)組件不同的是他返回了一個完整的組件...他返回了一個class?。?！ 0x001 直接上栗子 照常，先寫個App組件，外部傳入一個theme ...

    QLQ 評論0 收藏0

  • 細說 Django—web 前后端分離

    摘要：理解這個統(tǒng)一標準的不符規(guī)范的資源沒有統(tǒng)一實踐一個例子圖書管理系統(tǒng)技術(shù)棧前端后端要點驗證前端路由統(tǒng)一的請求響應攔截處理權(quán)限控制表級對象級如下圖最后，是否要做前后端分離的開發(fā)模式，取決于實際情況的多方位考量，適合的才是更好的。 所謂的前后端分離 淵源 前端發(fā)展史 特點 前端：負責 View 和 Controller 層 后端：只負責 Model 層，業(yè)務處理/數(shù)據(jù)等 優(yōu)缺點 優(yōu)點：解...

    adam1q84 評論0 收藏0

  • PHP多進程初探 --- 再次談daemon進程

    摘要：因為子進程一定不會是組長進程，所以子進程可以調(diào)用。主進程退出子進程繼續(xù)執(zhí)行啦啦啦，啦啦啦，啦啦啦，已經(jīng)變成啦，開心一般服務器軟件都有寫配置項，比如以模式運行還是以模式運行。 [原文地址：https://blog.ti-node.com/blog...] 其實前面是談過一次daemon進程的，但是并涉及過多原理，但是并不影響使用。今天打算說說關(guān)于daemon進程更多的二三事，本質(zhì)上說，如...

    fox_soyoung 評論0 收藏0

  • 當初要是看了這篇，React高階組件早會了

    摘要：也就是說，如果能處理名為的這個高階組件返回的組件則完全無視這個。先展示我是一個組件，我設(shè)置了兩秒，之后展示倒計時完成 概況： 什么是高階組件？ 高階部件是一種用于復用組件邏輯的高級技術(shù)，它并不是 React API的一部分，而是從React 演化而來的一種模式。 具體地說，高階組件就是一個接收一個組件并返回另外一個新組件的函數(shù)！ 這是官方文檔說的，我沒有截全，因為后面的解釋會造成誤解...

    Yi_Zhi_Yu 評論0 收藏0

  • React系列---React（三）組件的生命周期

    摘要：組件裝載過程裝載過程依次調(diào)用的生命周期函數(shù)中每個類的構(gòu)造函數(shù)，創(chuàng)造一個組件實例，當然會調(diào)用對應的構(gòu)造函數(shù)。組件需要構(gòu)造函數(shù)，是為了以下目的初始化，因為生命周期中任何函數(shù)都有可能訪問，構(gòu)造函數(shù)是初始化的理想場所綁定成員函數(shù)的環(huán)境。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---之React（三）組件的生...

    geekzhou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<