使用 State Hook

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

介紹 Hook 使用過這個範例讓我們熟悉 Hook：

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，我們稱作為「count」。  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我們會藉由在同樣的範例中使用 class 時有什麼差別來學習 Hook。

相等的 Class 範例

如果你以前在 React 中使用過 class，這段程式應該對你不陌生：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

State 從 { count: 0 } 開始，當使用者點擊按鈕時，我們藉由呼叫 this.setState() 增加 state.count。在這ㄧ整頁，我們會使用這個 class 中的片段來說明。

注意

你也許會好奇我們為什麼要用一個計數器，而不是一個更實際的例子。其實當我們還在學習怎麼使用 Hook 的時候，這有助於我們專注在 API 上面。

Hook 和 Function Component

提醒一下，在 React 中 function component 看起來像這樣：

const Example = (props) => {
  // 你可以在這裡使用 Hook！
  return <div />;
}

或是：

function Example(props) {
  // 你可以在這裡使用 Hook！
  return <div />;
}

也許你知道它曾被稱作「stateless component」。但因為現在這些 component 也可以使用 React state 了，我們會比較喜歡「function component」這個稱呼。

Hook 不會在 class 裡運作。但你可以使用它來取代 class。

什麼是 Hook？

就從 React 引入 useState 來開始新的範例吧：

import React, { useState } from 'react';
function Example() {
  // ...
}

什麼是 Hook？Hook 是一個讓你可以使用 React 各項功能的特殊 function。舉例來說，useState 是一個讓你增加 React state 到 function component 的 Hook。在後面的章節我們會學習其他 Hook。

什麼時候該使用 Hook？以前當你寫一個 function component 需要增加一些 state 時，你必須轉換成 class。現在你可以直接在 function component 中使用 Hook。我們現在就來試試看吧！

注意

關於在 component 中哪裡可以使用 Hook，有一些特別的規則。我們會在 Hook 的規則中學習。

宣告一個 State 變數

在 class 中，藉由在 constructor 設定 this.state 成 { count: 0 } 把 count 這個 state 起始值設為 0。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      count: 0    };  }

在 function component 中，我們沒有 this，所以我們沒辦法指定或讀取 this.state。相反地，我們可以直接在 component 中呼叫 useState Hook。

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，我們稱作為「count」。  const [count, setCount] = useState(0);

呼叫 useState 做了什麼？它宣告了一個「state 變數」。我們的變數叫做 count，也可以有其他稱呼，像是 banana。這是一個在 function 呼叫中「保留」變數的方法－useState 就像是 class 中 this.state 的功能一樣。一般情況下，變數會在 function 結束時「消失」，但 state 變數會被 React 保留起來。

我們傳入什麼參數給 useState？唯一需要傳入 useState() Hook 的參數就是 state 的起始值。不像 class，這個 state 不需要是一個 object。我們可以使用我們所需的 number 或是 string。在範例中，我們只需要一個 number 記錄使用者點擊了多少次，所以我們傳入 0 來當作起始值。（如果要在 state 儲存兩個不同的值，可以呼叫 useState() 兩次。）

useState 回傳了什麼？它回傳了一對值：目前的 state 跟一個可以更新 state 的 function。這就是為什麼我們寫 const [count, setCount] = useState() 的原因。除了你是直接拿到一對，這跟 class 中的 this.state.count 和 this.setState 很類似。如果你對我們用的語法不熟悉，我們稍後會在本頁的底部討論它。

現在我們知道 useState Hook 做了什麼，我們的範例會看起來更有感覺：

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，我們稱作為「count」。  const [count, setCount] = useState(0);

我們宣告了一個叫做 count 的 state 變數，並將起始值設成了 0。React 在 re-render 間會記住目前的值，並將它提供給我們的 function。如果我們需要更新目前的 count，我們可以呼叫 setCount。

注意

你也許會好奇：為什麼 useState 不叫做 createState？

state 只會在第一次 render 時被建立，所以「Create」並不會比較精準。而在其後的 render，useState 只會給我們目前的 state。不然這就不叫做 state 啦！另外還有一個理由，為什麼 Hook 總是以 use 起頭。我們稍後會在 Hook 規則中了解。

讀取 State

在 class 中我們要顯示目前的計數，我們使用 this.state.count：

  <p>You clicked {this.state.count} times</p>

在 function 中，我們可以直接使用 count：

  <p>You clicked {count} times</p>

更新 State

在 class 中，我們需要呼叫 this.setState() 來更新 count state：

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>    Click me
  </button>

在 function 中，我們已經有 setCount 和 count 變數，所以我們不需要 this：

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

總結

我們來一行一行總結一下我們學了什麼，並確認我們都懂了。

 1:  import React, { useState } from 'react'; 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0); 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

第一行：我們從 React 引入 useState Hook。它讓我們可以在 function component 保留 local state。
第四行：在 Example component 裡，我們呼叫 useState Hook 宣告了一個新的 state 變數。並回傳了一對由我們命名的值。我們將代表點擊數的變數命名為 count。我們將起始值設為 0 並傳入 useState 當作唯一參數。第二個回傳的值是個可以更新 count 的 function，所以我們命名為 setCount。
第九行：當使用者點擊，我們就呼叫 setCount 並傳入新的值。然後 React 就會 re-render Example component，並傳入新的 count 值。

別急！也許你需要好好消化一番。如果還是有些不懂，你可以試著再將上面那段程式從頭到尾看一下。我們保證一旦你試著把 class 的 state 運作方式「遺忘」，這一切會合理起來。

提示：方括號代表什麼?

你也許注意到了，當我們宣告 state 變數時使用了方括號：

  const [count, setCount] = useState(0);

等號左邊的並不是 React 的 API。你可以命名你自己的 state 變數：

  const [fruit, setFruit] = useState('banana');

這個 JavaScript 語法叫做陣列解構賦值。這代表我們宣告了兩個新的變數 fruit 和 setFruit，fruit 被設為 useState 回傳的第一個值，setFruit 則是第二個。跟下面這段程式相同：

  var fruitStateVariable = useState('banana'); // 回傳一對值
  var fruit = fruitStateVariable[0]; // 第一個值
  var setFruit = fruitStateVariable[1]; // 第二個值

當我們使用 useState 宣告 state 變數，他會回傳一對在 array 裡的值。第一個值是目前 state 的值，第二個是一個可以更新 state 的 function。因為它們有特殊的意義，只用 [0] 和 [1] 來存取它們的話會令人困惑。所以我們使用陣列解構賦值來命名它們。

注意

你也許會好奇既然我們沒有傳入任何東西像是 this，React 要怎麼知道哪個 component 對應到哪個 useState。我們會在 FAQ 章節解答這個問題和其他問題。

提示: 使用多個 State 變數

把 state 變數宣告成一對 [something, setSomething] 同時也很便利，因為如果想要使用超過一個 state 變數，這能讓我們對不同的 state 變數有不同的命名

function ExampleWithManyStates() {
  // 宣告多個 state 變數！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

在上面的 component 中，我們的 local 變數有 age、fruit 和 todos，而且我們可以單獨更新它們。

  function handleOrangeClick() {
    // 類似於 this.setState({ fruit: 'orange' })
    setFruit('orange');
  }

你不需要使用很多 state 變數。state 變數可以是 object 或是 array，所以你可以把相關的資料放在一起。然而，不像 class 裡的 this.setState 會合併原本的 state，這裡更新 state 變數會直接取代。

我們在 FAQ 章節提供更多拆分獨立的 state 變數的建議。

下一步

在這一頁，我們學習了其中一個 React 提供的 Hook－useState。我們有時也稱它做「State Hook」。前所未有地，它讓我們能夠增加 local state 到 React function component！

我們同時也瞭解了更多什麼是 Hook。Hook 是可以讓你在 function component 使用 React 各項功能的 function。還有更多 Hook 我們還沒認識，而 Hook 的名字都會以 use 起頭。

現在我們繼續學習下個 Hook：useEffect。 就像 class 的生命週期方法，它讓你能夠在 component 使用 side effect。

Is this page useful?Edit this page