React 官網列子學習

標籤：

一個有狀態的組件

除了接受輸入資料（通過 this.props ），組件還可以保持內部狀態資料（通過this.state ）。當一個組件的狀態資料的變化，展現的標記將被重新調用render() 更新。

先看結構，下面是hook函數

hook函數：<br>
最早是指windows 系統下提供的一種用來替換DOS 系統下的中斷的系統機制；<br>
現在則是泛指，在對特定的系統事件進行hook 後，一旦發生已hook 事件，對該事件進行hook 的程式，就會收到系統的通知。這是程式就可以對該事件第一時間做出響應。

 

 

//Mounting 表示 React Components 被render 解析產生對應的DOM 節點並被插入瀏覽器的DOM 節點並被插入瀏覽器的DOM 結構的一個過程//執行順序看var Timer = React.createClass({//初始化state  getInitialState: function() {    return {secondsElapsed: 0};  },  tick: function() {  //調用setState為secondsElapsed重新賦值，調用後會重新render    this.setState({secondsElapsed: this.state.secondsElapsed + 1});  },  //react Components生命週期在render後調用  componentDidMount: function() {
　　//定時器更新    this.interval = setInterval(this.tick, 1000);  },  //react Components生命週期在控制項銷毀時調用  componentWillUnmount: function() {
　　  //清除當前定時器    clearInterval(this.interval);  },  render: function() {    return (    //輸出當前secondsElapsed值      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>    );  }});//mountNode,綁定到指定id上，一般這麼寫document.getElementById(‘app‘)React.render(<Timer />, mountNode);

 

React 官網列子學習