[React Hooks 翻譯] 3-8 State Hook

示例：等價的class組件

使用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>
    );
  }
}
複製代碼

下面是使用Hook重構的代碼

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
  );
}
複製代碼

Hooks和函數組件

Hook出來之前，函數組件和無狀態組件是等價的，可是Hook出來之後，函數組件也能夠有狀態了，此時兩者並不等價。因此咱們如今更喜歡使用函數組件這個名字

Hook不能在class組件中使用

什麼是Hook？

什麼是Hook？Hook就是一個鉤子函數，用Hook就能從函數組件裏hook到React state和生命週期。好比useState就是一個Hook，它能讓函數組件使用React state（本來只有class組件纔有state的）

什麼時候該使用Hook？ 若是你在編寫一個函數組件並意識到你須要爲它添加一些狀態，以前你必須將它轉換爲一個類。如今，您能夠在現有函數組件中使用Hook。

聲明狀態變量

在class組件裏咱們經過在構造函數中將this.state設置爲{count：0}來將計數狀態初始化爲0

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

在function組件內部調用useState Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
複製代碼

useState 作了什麼？ useState聲明瞭一個狀態變量。

1. 這裏咱們的變量叫作count，但咱們能夠稱之爲其餘任何東西，好比banana。
2. useState是一種在函數調用之間「保留」某些值的方法。一般，當函數退出時變量會被清除，但React將保留狀態變量。
3. useState和this.state提供了徹底相同的功能。

傳遞給useState做爲參數是什麼？ useState的惟一參數是初始狀態。

1. 與類不一樣，狀態沒必要是對象。能夠是任何類型的值
2. 在咱們的示例中，咱們只須要一個數字表示用戶單擊的次數，所以將0做爲變量的初始狀態。
3. 若是咱們想在狀態中存儲兩個不一樣的值，咱們能夠調用useState兩次。

useState返回什麼？ 當前狀態和更新它的函數。

1. 這與類中的this.state.count和this.setState相似，只不過將它們放在一對中。

爲何useState沒有命名爲createState？

"create"不許確，由於狀態僅在咱們的組件第一次呈現時create。下一次渲染useState將爲咱們「提供」當前狀態。不然它根本不會是「狀態」！ Hook名稱老是已以"use"開頭也是有緣由的。咱們將在後來的規則中瞭解緣由。

讀取狀態

類組件裏咱們這麼寫

<p>You clicked {this.state.count} times</p>
複製代碼

函數組件裏咱們這麼寫

<p>You clicked {count} times</p>
複製代碼

更新狀態

類組件：

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

In a function, we already have setCount and count as variables so we don’t need this:

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