React元件之Clock

沉默的範大叔發表於2018-10-06
React元件

這個例子是React官方文件裡面的，程式碼也在CodePen，例子非常簡單，展示了React元件開發的基本過程，這裡將這個例子進行分析記錄，當做學習筆記吧！首先看程式碼：

//HTML
 <div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

//JS
function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
複製程式碼

程式的執行過程：

1、在html裡面定義一個div，id為root

2、 呼叫ReactDOM.render使用App渲染id為root的div，這裡會呼叫函式App

3、函式App返回的是什麼呢？不是字串，也不是HTML，而是JSX，JSX是JavaScript語法的擴充套件，Babel會將JSX編譯成React.createElement()的呼叫，這裡可以簡單看成返回介面佈局就行了

4、在函式App返回的佈局中，有三個Clock元件，Clock元件繼承React.Component，當被傳入ReactDOM.render中後，會呼叫Clock構造方法

5、在Clock構造方法可以接收一個props, 它來儲存元件的元件的屬性，這裡並沒有傳入任何屬性值，在構造方法裡面初始化元件的狀態state，給狀態設定了date欄位

6、接下來會呼叫Clock的render方法來渲染元件，render方法也是返回了JSX，裡面有Hello World的標題，並且呼叫FormattedDate函式，傳入引數date，返回時間的JSX，在FormattedDate函式裡通過props.date獲取傳入的date

7、這時候就已經可以看到三個Clock顯示時間了

8、那時間怎麼自動更新的呢？當Clock被插入DOM時，會觸發componentDidMount，當Clock從DOM移除時，會觸發componentWillUnmount，所以在componentDidMount呼叫時開始定時更新，在componentWillUnmount關閉定時更新

9、定時更新會呼叫tick方法，tick方法呼叫setState來更新date欄位

10、setState方法會觸發render方法的重新呼叫，進而更新時間

由於筆者之前是做移動端開發，React的元件的概念跟iOS和Android的View的概念基本一致，甚至一些方法可以對應的上，如componentDidMount和componentWillUnmount可對應Android View中的onAttachedToWindow和onDetachedFromWindow, Clock中的render可對應Android View中的onDraw。可以看出來程式設計理念都是大同小異。元件化實際上就是模組化，提高了程式碼的複用性和可維護性。

相關文章