在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,運行一下看看它們之間的運行順序。結果如下