成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

react之生命周期淵源

qingshanli1988 / 3519人閱讀

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

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

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

getInitialState
作用于組件的實(shí)例，在實(shí)例創(chuàng)建時調(diào)用一次，用于初始化每個實(shí)例的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
真實(shí)的DOM被渲染出來后調(diào)用，在該方法中可通過this.getDOMNode()訪問到真實(shí)的DOM元素。此時已可 以使用其他類庫來操作這個DOM。
在服務(wù)端中，該方法不會被調(diào)用。

實(shí)例化之后完成的更新

getInitialState

componentWillMount

render

componentDidMount

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

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

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

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

render

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

組件銷毀

componentWillUnmount

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

自定義組件（ReactCompositeComponent）的生命周期主要通過三種狀態(tài)進(jìn)行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它們負(fù)責(zé)通知組件當(dāng)前所處的狀態(tài)，應(yīng)該執(zhí)行生命周期中的哪個步驟，是否可以更新 state。三個狀態(tài)對應(yīng)三種方法，分別為：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所以要準(zhǔn)備開始渲染頁面之前拿到的虛擬的DOM，需要經(jīng)過組裝之后然后給到瀏覽器，在這里會發(fā)生：首先會通過getInitialState拿到初始化的數(shù)據(jù)

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

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

  // 當(dāng)前元素對應(yīng)的 props
  this.props = this._processProps(this.props);

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

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

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

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

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

狀態(tài)二：receive Props

updateComponent 負(fù)責(zé)管理生命周期中的 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 進(jìn)行組件更新，但 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://m.hztianpu.com/yun/92547.html

相關(guān)文章

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

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

    QLQ 評論0 收藏0

  • 細(xì)說 Django—web 前后端分離

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

    adam1q84 評論0 收藏0

  • PHP多進(jìn)程初探 --- 再次談daemon進(jìn)程

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

    fox_soyoung 評論0 收藏0

  • 當(dāng)初要是看了這篇，React高階組件早會了

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

    Yi_Zhi_Yu 評論0 收藏0

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

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

    geekzhou 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<