。

另外，本教程的程式碼將全部使用 es6 語法，教程中我會介紹一些用到的 es6 語法，但是不會從頭講解了，推薦閱讀

，也可查閱本文件一開始的影片教程。這裡我們重點介紹這個專案開發中常用的幾個生命週期函式（hook），相信你在接下來的 React 開發中，也會常用這些。

以下宣告週期，也沒必要每個都寫demo來解釋，先簡單瞭解一下，後面會根據實際的例子來解釋，這樣會更加易懂。

getInitialState

初始化元件 state 資料，但是在 es6 的語法中，我們可以使用以下書寫方式代替

class Hello extends React.Component {
    constructor(props, context) {
        super(props, context);
        // 初始化元件 state 資料
        this.state = {
            now: Date.now()
        }
    }
}

render

最常用的hook，返回元件要渲染的模板。

comopentDidMount

元件第一次載入時渲染完成的事件，一般在此獲取網路資料。實際開始專案開發時，會經常用到。

shouldComponentUpdate

主要用於效能最佳化，React 的效能最佳化也是一個很重要的話題，後面一併講解。

componentDidUpdate

元件更新了之後觸發的事件，一般用於清空並更新資料。實際開始專案開發時，會經常用到。

componentWillUnmount

元件在銷燬之前觸發的事件，一般使用者儲存一些特殊資訊，以及清理setTimeout事件等。

markdown 使用練習練習

相關文章