国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React16.3.0以后的生命周期(一) - 組件加載

betacat / 763人閱讀

摘要：組件加載當組件被實例化并且插入時所執(zhí)行的方法，也會按照下的順序依次執(zhí)行。示例方法是在組件加載完后立即執(zhí)行，也就是當該組件相關的節(jié)點插入到樹中時。該方法在組件生命中只執(zhí)行一次。注意一些監(jiān)聽需要在組件卸載時清理掉，否則會引起異常。

組件加載

當組件被實例化并且插入Dom時所執(zhí)行的方法，也會按照下的順序依次執(zhí)行。

constructor()

構造方法。

這個方法有兩個目的：

初始化一個本地state。

this.state = {color: "red"};
要避免將props參數(shù)直接賦值給state, this.state = {color: props.color}是不允許 的

綁定方法。

我們知道React Class中是不會繼承this的，如果在class的方法中使用this，那么我們需要將this綁定到方法中。

this.clickHandler = this.clickHandler.bind(this);
綁定this，將需要super(props),否則會提示找不到this.

示例：

constructor(props) {
  super(props);
  this.state = {color: "red"};
  this.clickHandler = this.clickHandler.bind(this);
}

static getDerivedStateFromProps()

當本地state需要根據(jù)props來改變的時候可調用此方法。

這個方法是在render()前會被執(zhí)行，只要執(zhí)行render()都會被在之前被觸發(fā)。

該方法有兩個參數(shù)props和state; 返回值為state對象, 不需要返回整體state，把需要改變的state返回即可。

示例：

static getDerivedStateFromProps(props, state) {
  if(props.color !== state.color) {
    return {color: props.color};
  }
}

render()

這個方法是React組件中必須要提供的方法。當state或者props任一數(shù)據(jù)有更新時都會執(zhí)行。

需要注意當繼承PureComponent時，不會對對象進行深度比較，也就是，不會根據(jù)對象內的對象變化時執(zhí)行render().

render()是一個純函數(shù)，也就是不能在這個方法中有類似setState()這樣的行為。

返回的數(shù)據(jù)類型可以有：

null、String、Number、Array、Boolean。

React elements

Fragment

Portal

注意：不能返回undefined.

當shouldComponentUpdate()返回false時，無論state和props有沒有變化，這個方法都不執(zhí)行。

示例：

render() {
  return (
    
{this.state.color}

  );
}

componentDidMount()

componentDidMount()方法是在組件加載完后立即執(zhí)行，也就是當該組件相關的dom節(jié)點插入到dom樹中時。該方法在組件生命中只執(zhí)行一次。

一般情況，我們會在這里setState()根據(jù)props的值，也可以從這里調用接口，獲取服務端的數(shù)據(jù)，也可以在這里監(jiān)聽websocket、setInterval等操作。

注意：一些監(jiān)聽需要在組件卸載時清理掉，否則會引起異常。

示例：

componentDidMount() {
  this.setState({color: this.props.color});
}

在線示例

推薦閱讀《React 手稿》

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

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

相關文章

  • React16.3.0以后的生命周期(二) - 更新、卸載、異常

    摘要：示例此方法有兩個參數(shù)返回值為或者默認返回主要使用它來控制組件要不要渲然，常用作性能優(yōu)化。只能捕獲組件樹的異常，無法捕獲這個方法內的異常。 組件更新 static getDerivedStateFromProps() 當本地state需要根據(jù)props來改變的時候可調用此方法。 這個方法是在render()前會被執(zhí)行，只要執(zhí)行render()都會被在之前被觸發(fā)。 該方法有兩個參數(shù)pr...

    since1986 評論0 收藏0

  • 初識React(3)：組件

    摘要：創(chuàng)建組件創(chuàng)建組件之前要注意以下幾點組件創(chuàng)建的名稱首字母得大寫組件中返回的只能是一個根節(jié)點，所有的內容得用一個元素都框起來無狀態(tài)函數(shù)式組件無狀態(tài)函數(shù)式組件可以理解成就是一個函數(shù)生成的，使得代碼的可讀性更好，并且精簡便利，減少了冗余，無狀態(tài)組件 創(chuàng)建組件 創(chuàng)建組件之前要注意以下幾點： 組件創(chuàng)建的名稱首字母得大寫 組件中返回的JSX只能是一個根節(jié)點，所有的內容得用一個元素都框起來 1.無...

    FullStackDeveloper 評論0 收藏0

  • 不了解一下React16.3之后的新生命周期？

    摘要：本文主要介紹之后的生命周期。該方法有兩個參數(shù)和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數(shù)據(jù)類型可以有。此生命周期主要用于優(yōu)化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...

    468122151 評論0 收藏0

  • React組件生命周期

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

    mgckid 評論0 收藏0

  • 捋一捋React的生命周期

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

    MobService 評論0 收藏0

發(fā)表評論

0條評論

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