React元件之Clock

React · 發表 2018-10-06 10:54:50

摘要：這個例子是React官方文件裡面的，程式碼也在CodePen，例子非常簡單，展示了React元件開發的基本過程，這裡將這個例子進行分析記錄，當做學習筆記吧！首先看程式碼： //HTML <div id="root"> <!-- This e...

這個例子是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。可以看出來程式設計理念都是大同小異。元件化實際上就是模組化，提高了程式碼的複用性和可維護性。

React元件之Clock

您可能也會喜歡…