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

資訊專欄INFORMATION COLUMN

React組件生命周期

anquan / 3373人閱讀

摘要：組件的生命周期包含三個主要部分掛載組件被插入到中。更新組件被重新渲染，查明是否應該刷新。提供生命周期方法，你可以在這些方法中放入自己的代碼。完整實例展示總結生命周期調用次數能否使用全局調用一次否否是否是是否否否否

組件的生命周期包含三個主要部分：

掛載： 組件被插入到DOM中。

更新： 組件被重新渲染，查明DOM是否應該刷新。

移除： 組件從DOM中移除。

React提供生命周期方法，你可以在這些方法中放入自己的代碼。我們提供will方法，會在某些行為發生之前調用，和did方法，會在某些行為發生之后調用。

裝載組件觸發
getInitialState

object在組件被掛載之前調用。狀態化的組件應該實現這個方法，返回初始的state數據。

初始化 this.state 的值，只在組件裝載之前調用一次。

如果是使用 ES6 的語法，你也可以在構造函數中初始化狀態，比如：

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

  render() {
    // ...
  }
}
getDefaultProps

只在組件創建時調用一次并緩存返回的對象（即在 React.createClass 之后就會調用）。

因為這個方法在實例初始化之前調用，所以在這個方法里面不能依賴 this 獲取到這個組件的實例。
在組件裝載之后，這個方法緩存的結果會用來保證訪問 this.props 的屬性時，當這個屬性沒有在父組件中傳入（在這個組件的 JSX 屬性里設置），也總是有值的。

如果是使用 ES6 語法，可以直接定義 defaultProps 這個類屬性來替代，這樣能更直觀的知道 default props 是預先定義好的對象值：

Counter.defaultProps = { initialCount: 0 };
componentWillMount()

componentWillMount()只會在裝載之前調用一次，在 render 之前調用，你可以在這個方法里面調用 setState 改變狀態，并且不會導致額外調用一次 render。

render()

組裝生成這個組件的 HTML 結構（使用原生 HTML 標簽或者子組件），也可以返回 null或者 false，這時候 ReactDOM.findDOMNode(this) 會返回 null。

componentDidMount()

componentDidMount()在掛載結束之后馬上被調用。只會在裝載完成之后調用一次，在 render 之后調用，從這里開始可以通過 ReactDOM.findDOMNode(this) 獲取到組件的 DOM 節點。

更新組件觸發
componentWillReceiveProps(object nextProps)

當一個掛載的組件接收到新的props的時候被調用。該方法應該用于比較this.props和nextProps，然后使用this.setState()來改變state。

在初始化渲染的時候，該方法不會調用。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}
shouldComponentUpdate(object nextProps, object nextState): boolean

當組件做出是否要更新DOM的決定的時候被調用。

在接收到新的 props或者 state，將要渲染之前調用。該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會。

如果確定新的 props 和 state 不會導致組件更新，則此處應該返回 false。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果 shouldComponentUpdate 返回 false，則 render() 將不會執行，直到下一次 state 改變。

componentWillUpdate(object nextProps, object nextState)

在更新發生之前被調用。你可以在這里調用this.setState()。

componentDidUpdate(object prevProps, object prevState)

在更新發生之后調用。

卸載組件觸發
componentWillUnmount()

在組件移除和銷毀之前被調用。清理工作應該放在這里。比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。

裝載的方法
getDOMNode()

DOMElement可以在任何掛載的組件上面調用，用于獲取一個指向它的渲染DOM節點的引用。

forceUpdate()

當你知道一些很深的組件state已經改變了的時候，可以在該組件上面調用，而不是使用this.setState()。

完整實例展示
var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         

            
            
         

      );
    }
})

var Content = React.createClass({
  componentWillMount:function() {
      console.log("Component WILL MOUNT!")
  },
  componentDidMount:function() {
       console.log("Component DID MOUNT!")
  },
  componentWillReceiveProps:function(newProps) {
        console.log("Component WILL RECIEVE PROPS!")
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log("Component WILL UPDATE!");
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log("Component DID UPDATE!")
  },
  componentWillUnmount:function() {
         console.log("Component WILL UNMOUNT!")
  },
  render: function () {
    return (
      

        
{this.props.myNumber}

      

    );
  }
});

ReactDOM.render(
   

      
,
  document.getElementById("example")
);
總結
生命周期 調用次數 能否使用setSate()
getDefaultProps 1(全局調用一次) 否
getInitialState 1 否
componentWillMount 1 是
render >=1 否
componentDidMount 1 是
componentWillReceiveProps >=0 是
shouldComponentUpdate >=0 否
componentWillUpdate >=0 否
componentDidUpdate >=0 否
componentWillUnmount 1 否

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

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

相關文章

  • 捋一捋React的生命周期

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

    MobService 評論0 收藏0

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

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

    Yumenokanata 評論0 收藏0

  • React組件生命周期

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

    mgckid 評論0 收藏0

  • React組件生命周期詳解

    摘要：組件生命周期構造方法是對類的默認方法，通過命令生成對象實例時自動調用該方法。該生命周期可以發起異步請求，并。后廢棄該生命周期，可以在中完成設置渲染組件是一個組件必須定義的生命周期，用來渲染。該生命周期內可以進行。 React組件生命周期 constructor( ) 構造方法 constructor是ES6對類的默認方法，通過 new 命令生成對象實例時自動調用該方法。并且，該方法是...

    learn_shifeng 評論0 收藏0

  • React 深入系列４：組件的生命周期

    摘要：因為是深入系列文章，本文不會仔細介紹每個生命周期方法的使用，而是會重點講解在使用組件生命周期時，經常遇到的疑問和錯誤使用方式。父組件發生更新導致的組件更新，生命周期方法的調用情況同上所述。 文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列4：組件的生命周期 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深...

    warnerwu 評論0 收藏0

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

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

    468122151 評論0 收藏0

發表評論

0條評論

anquan

男|高級講師

TA的文章

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