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

資訊專欄INFORMATION COLUMN

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

since1986 / 350人閱讀

摘要：示例此方法有兩個參數(shù)返回值為或者默認返回主要使用它來控制組件要不要渲然，常用作性能優(yōu)化。只能捕獲組件樹的異常，無法捕獲這個方法內(nèi)的異常。

組件更新

static getDerivedStateFromProps()

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

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

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

示例：

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

shouldComponentUpdate()

此方法有兩個參數(shù)：shouldComponentUpdate(nextProps, nextState).

返回值為true或者false, 默認返回true.

主要使用它來控制組件要不要渲然，常用作性能優(yōu)化。

觸發(fā)此方法的條件是：組件接收任意props或者state時都會被調(diào)用。需要注意的是在第一次render()時和在調(diào)用forceUpdate()時都不會被觸發(fā)。

示例：

shouldComponentUpdate(nextProps, nextState) {
  if(nextProps.color !== this.props.color || nextState.size !== this.state.size) {
    return true;
  } 
  return false;
}

render()

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

需要注意當繼承PureComponent時，不會對對象進行深度比較，也就是，不會根據(jù)對象內(nèi)的對象變化時執(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}

      );
    }

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)在render將組件渲然到dom中就會執(zhí)行。

如果不實現(xiàn)該方法則返回null.

返回的數(shù)據(jù)由自己定義，并且返回的數(shù)據(jù)作為componentDidUpdate方法中的參數(shù)。

示例：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  render() {
    return (
      
{/* ...contents... */}

    );
  }
}

componentDidUpdate()

該方法在組件更新后立即執(zhí)行，并且在組件掛載階段不執(zhí)行。

componentDidUpdate(prevProps, prevState, snapshot)第三個參數(shù)就是上節(jié)中提到的。

示例：

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

組件卸載

componentWillUnmount()

在組件被卸載或者銷毀的時候執(zhí)行，方法中不能再有setState的動作。

一般用作清除組件中起的定義器、webSocket等。

示例：

componentWillUnmount() {
  if(this.timer) {
    window.clearInterval(this.timer);
    this.timer = null;
  }
}

在線示例

組件異常處理

componentDidCatch()

componentDidCatch(error, info) 異常的處理。

只能捕獲組件樹的異常，無法捕獲這個方法內(nèi)的異常。

示例：

定義一下異常處理組件：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    window.console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return 
Something went wrong.
;
    }
    return this.props.children;
  }
}

使用這個異常組件：

推薦閱讀《React 手稿》

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

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

相關(guān)文章

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

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

    betacat 評論0 收藏0

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

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

    468122151 評論0 收藏0

  • React16時代，該用什么姿勢寫 React ?

    摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調(diào)用，此時已更新返回值作為的第個參數(shù)一般用于獲取之前的數(shù)據(jù)語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

    Reducto 評論0 收藏0

  • React 導讀（二）

    摘要：對于最開始關(guān)注的是的初始化以及在哪里請求。在進行初始化，推薦在中進行請求。是在組件即將被卸載前一刻的鉤子，一般用于取消中訂閱的事件等作用，清理一些不要的變量等，避免內(nèi)存泄漏。第二條的原因額，說好的更新才調(diào)，初始化不調(diào)用是符合邏輯的。 前言 在上篇文章React 導讀（一）中學習到了寫第一個 Web 組件，這篇文章將繼續(xù)之前的目錄，開始新的知識點補充： [x] React 如何編寫 H...

    Doyle 評論0 收藏0

  • 捋一捋React的生命周期

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

    MobService 評論0 收藏0

發(fā)表評論

0條評論

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