react生命週期小demo
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./build/react.js" charset="utf-8"></script> <script src="./build/react-dom.js" charset="utf-8"></script> <script src="./build/browser.min.js" charset="utf-8"></script> </head> <body> <div id="container"> </div> </body> <script type="text/babel"> /* 生命週期三個狀態： Mounting：元件掛載，已插入真實DOM Updating：元件更新，正在被重新渲染 Unmounting：元件移出，已移出真實DOM 生命週期四個階段： 建立、例項化、更新、銷燬 */ var Demo = React.createClass({ /*-----------------------------------------------------------------------------*/ // 1.建立階段：只調用getDefaultProps方法 getDefaultProps: function(){ // 在建立類的時候被呼叫，設定this.props的預設值 console.log("getDefaultProps"); return{}; }, /*-----------------------------------------------------------------------------*/ // 2.例項化階段：getInitialState->componentWillMount->render->componentDidMount getInitialState: function() { //設定this.state的預設值 console.log("getInitialState"); return null; }, componentWillMount: function() { //元件將要掛載，在render之前呼叫，即使多次重複渲染，或者改變元件的state，僅執行一次 console.log("componentWillMount"); }, render: function() { //用來渲染並返回一個虛擬dom console.log("render"); return <div>hello react</div> }, componentDidMount: function() { //元件已經掛載，render之後呼叫，在該方法中，react會使用render方法返回的虛擬DOM物件建立真實的DOM結構 //可以在這個方法中獲取DOM節點，同一個元件重複渲染只執行一次 console.log("componentDidMount"); }, /*-----------------------------------------------------------------------------*/ //3.更新階段：componentWillReceiveProps->shuldComponentUpdate->componentWillUpdate(如果返回值是false，後三個方法不執行)->render->componentDidUpdate componentWillReceiveProps: function() { //componentWillReceiveProps(object nextProps) //已載入元件收到新的props之前呼叫，注意元件初始化渲染時不會執行 console.log("componentWillReceiveProps"); }, shouldComponentUpdate: function() { //是否需要重新渲染元件，接收到了新的props或者新的state的時候立即呼叫 console.log("shouldComponentUpdate"); return true; }, componentWillUpdate: function() { //元件將要更新 console.log("componentWillUpdate"); }, componentDidUpdate: function() { //元件已經更新 console.log("componentDidUpdate"); }, /*-----------------------------------------------------------------------------*/ //4.銷燬階段：componentWilUnmount componentWilUnmount: function() { //在元件將要被移除之前的時間點觸發 console.log("componentWilUnmount"); }, }) //第一次建立並載入元件 ReactDOM.render( <Demo/>, document.getElementById("container") ) //重新渲染 ReactDOM.render( <Demo/>, document.getElementById("container") ) //移除元件 ReactDOM.unmountComponentAtNode(document.getElementById("container")); </script> </html>