React.js 實戰之 State & 生命週期

摘要： 生命週期圖解 參考該例 目前,我們只學習了一種方法來更新UI 我們呼叫 ReactDOM.render() 來改變輸出 在本節中，我學習如何使 Clock 元件真正可重用和封裝它將設定自己的計時器，並每...

參考該例

目前,我們只學習了一種方法來更新UI

我們呼叫 ReactDOM.render() 來改變輸出

• 在本節中，我學習如何使 Clock 元件真正可重用和封裝

  它將設定自己的計時器，並每秒更新一次

• 從封裝時鐘開始

  

• 然而，它錯過了一個關鍵的要求

  Clock設定一個定時器並且每秒更新UI應該是Clock的實現細節

理想情況下，我們寫一次 Clock 然後它能更新自身

• 為實現這個需求，我們需要為 Clock 元件新增 狀態
  狀態與屬性十分相似，但狀態是 私有的，完全受控於當前元件

• 我們之前提到過，定義為類的元件有一些特性

  區域性狀態就是如此：一個功能只適用於類

將函式轉換為類

將函式元件 Clock 轉換為類

1. 建立一個名稱擴充套件為 React.Component 的 JavaScript/Reference/Classes" target="_blank" rel="nofollow,noindex">ES6 類

2. 建立一個 render() 空方法

3. 將函式體移動到 render() 中

4. 在 render() 中，使用 this.props 替換 props

5. 刪除剩餘的空函式宣告

   

Clock 現在被定義為一個類而不只是一個函式

使用類就允許我們使用其它特性，例如區域性狀態、生命週期鉤子

為一個類新增區域性狀態

三步將 date 從屬性移動到狀態中

• 在 render() 中使用 this.state.date 替代 this.props.date
  
  
• 新增一個 JavaScript/Reference/Classes#Constructor" target="_blank" rel="nofollow,noindex">類建構函式 來初始化狀態 this.state
  
  
  注意如何傳遞 props 到基礎建構函式的
  
  
  類元件應始終使用 props 呼叫基礎建構函式

• 從 <Clock /> 元素移除 date 屬性

  

  稍後將定時器程式碼添加回元件本身。

• 結果如下

  

接下來，我們將使Clock設定自己的計時器並每秒更新一次

將生命週期方法新增到類中

在具有許多元件的應用程式中，在銷燬時釋放元件所佔用的資源非常重要

每當 Clock 元件第一次載入到DOM時，我們都想 API/WindowTimers/setInterval" target="_blank" rel="nofollow,noindex">生成定時器 ，這在React中被稱為 掛載

同樣，每當 Clock 生成的這個DOM被移除時，我們也會想要 清除定時器 ，這在React中被稱為 解除安裝

我們可以在元件類上宣告特殊的方法，當元件掛載或解除安裝時，來執行一些程式碼：