正式學習React 三

最基本的jsx語法什麼的，我就不介紹了，唯一覺得有用點的，就是宣告週期了。

下面的內容是轉來的，自己也可以網上去搜，我覺得別人歸納的挺不錯的，不過寫法可能不是es6的，不影響學習。

在元件的整個生命週期中，隨著該元件的props或者state發生改變，它的dom表現也將有相應的變化。元件本質上是狀態機；對於特定的輸入，它總會返回一致的輸出。

react為每個元件提供的生命週期分三個階段：

componentdidmount：在元件第一次繪製之後，會呼叫 componentdidmount()，通知元件已經載入完成。這個函式呼叫的時候，其虛擬 dom 已經構建完成，你可以在這個函式內通過this.getdomnode()方法訪問到它，可以修改dom，也可以獲取到子元件。從這個函式開始，就可以和 js 其他框架互動了，例如設定計時 settimeout 或者 setinterval，或者發起網路請求。這個函式也是只被呼叫一次。這個函式之後，就進入了穩定執行狀態，等待事件觸發。

【注意】當react執行在服務端時，componentdidmount方法不會被呼叫

//下面**在hello元件載入以後，通過 componentdidmount 方法設定乙個定時器，
//每隔100毫秒，就重新設定元件的透明度，從而引發重新渲染。
var hello = react.createclass(;
},componentdidmount: function () 
this.setstate();
}.bind(this), 100);
},render: function () }>
hello 
);}});
reactdom.render(
"world"/>,
document.body
);

隨著應用狀態的改變，以及元件逐漸受到影響，以下方法將會依次被呼叫

var helloworld = react.createclass(,
shouldcomponentupdate: function () ,
componentwillupdate: function () ,
render: function () 
;     },
componentdidupdate: function() ,
});var hellouniverse = react.createclass(;
},handlechange: function (event) );
},render: function () >
"text" onchange= />
},});
react.render(
, document.body);

最後，當該元件被使用完成後，componentwillunmount方法將會被呼叫，在這個函式中，可以做一些元件相關的清理操作，例如取消計時器、網路請求等。

var helloworld = react.createclass(
;     },
componentwillunmount: function() ,
});var hellouniverse = react.createclass(;
},handlechange: function (event) 
this.setstate();
},render: function () >
"text" onchange= />
},});
react.render(
, document.body);

生命週期的**函式總結

正式學習React 三

react學習教程入門三 react中定義元件

React學習筆記（三）元件

react基礎學習三資料雙向繫結

正式學習React 三

react學習教程入門三 react中定義元件

React學習筆記（三）元件

react基礎學習三 資料雙向繫結

相關推薦

react基礎學習三資料雙向繫結