React生命周期


在react生命周期中,分2段執行,一個掛載的生命周期,一個是組件發生了數據變動,或者事件觸發而引發的更新生命周期。

注:react生命周期很重要,對於很多組件場景的應用發揮重要作用,而且不熟悉生命周期之間的調用,mixins混合則玩不來

 先從初始化執行開始:

掛載生命周期:

  官方提供了componentWillMount,和componentDidMount

  componentWillMount:

     使用於render渲染組件之前調用,比如當前組件內部值需要發生邏輯上的變化,就可以在此做操作,這樣的好處是不用再次render渲染組件。

  componentDidMount:

    使用於render渲染組件之后調用,比如ajax

var ReactWeek = React.createClass({
    getInitialState:function(){
        return console.log("getInitialState");
    },
    getDefaultProps:function(){
        return console.log("getDefaultProps");
    },
    componentWillMount:function(){
        console.log("componentWillMount");
    },
    componentDidMount:function(){
        console.log("componentDidMount");
    },
    render:function(){
      return(
        <i></i>
      )
    }
});


React.render(<ReactWeek  />,document.body);

這里添加了設置默認值getDefaultProps和初始化設置的getInitialState,運行一下看看它們之間的運行順序。結果如下

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM