React 16.7.0-alpha hooks 之 state

轉載於免費視頻網：www.rails365.net/articles/re…

在以前的的hook 介紹裏有一段代碼:

import { 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。

等價的類示例

看下面這段代碼，你會以爲很熟悉

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

狀態以{count：0}開始，當用戶經過調用this.setState單擊按鈕時，咱們會增長state.count。咱們將在整個頁面中使用此類的片斷。

注意 你可能想知道爲何咱們在這裏使用計數器而不是更現實的例子。這是爲了幫助咱們專一於API，同時咱們仍在使用Hooks邁出第一步。

Hooks和函數組件

提醒一下，React中的函數組件以下所示：

const Example = (props) : {
  // You can use Hooks here!
  return <div />; } 複製代碼

或者是下面這樣的：

function Example(props) {
  // You can use Hooks here!
  return <div />; } 複製代碼

你可能之前將這些稱爲「無狀態組件」。咱們如今介紹的這些中具備使用React狀態的能力，因此咱們更喜歡名稱function components。

Hook在class內 不起 做用。可是你可使用它們而不是編寫類。

什麼是Hook

咱們的新示例首先從React導入useState Hook：

import { useState } from 'react';

function Example() {
  // ...
}
複製代碼

什麼是Hook? Hook是一種特殊功能，可以讓你「掛鉤」React功能。例如，useState是一個Hook，容許你將React狀態添加到函數組件。咱們稍後會學習其餘的Hooks。

我何時使用Hook? 若是你編寫一個函數組件並意識到你須要爲它添加一些狀態，那麼以前你必須將它轉換爲一個類。可是如今，你能夠在現有功能組件中使用Hook。咱們如今要作到這一點！

注意： 關於在何處可使用Hook而且不能在組件中使用Hook，有一些特殊規則。咱們將在「鉤子規則」中學習它們。

聲明一個狀態變量

在class組件中，咱們聲明一個狀態須要向下面這樣:

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

在函數組件中，咱們沒有this，因此咱們不能分配或讀取this.state。相反，咱們直接在組件內部調用useState Hook：

import { useState } from 'react';

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

調用useState有什麼做用？ 他聲明瞭一個狀態變量。咱們的變量叫作count，但咱們能夠稱之爲其餘任何東西，好比banana。這是一種在函數調用之間「保留」某些值的方法 - useState是一種使用this.state在類中提供的徹底相同功能的新方法。一般，當函數退出時變量「消失」但React保留狀態變量。

咱們傳遞給useState的參數是什麼？ useState Hook的惟一參數是初始狀態。與類不一樣，狀態沒必要是對象。他能夠是任何咱們須要的內容，好比數字，字符串等。在咱們的示例中，咱們只須要一個數字來表示用戶點擊的次數，所以將0做爲變量的初始狀態。（若是咱們想在狀態中存儲兩個不一樣的值，咱們將調用useState兩次。）

useState返回的是什麼？ 它返回一對值：當前狀態和更新狀態的函數。這就是咱們編寫const [count，setCount] = useState(0)的緣由。這與類中的 this.state.count和this.setState相似，只不過如今它們是成對的。

如今咱們知道了useState Hook的做用，咱們的例子應該更有意義

import { useState } from 'react';

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

咱們聲明一個名爲count的狀態變量，並將其設置爲0。React將記住從新渲染之間的當前值，併爲咱們的函數提供最新的值。若是咱們想要更新當前count，咱們能夠調用setCount。

注意 你可能想知道：爲何useState沒有命名爲createState？「create」不會很是準確，由於狀態僅在咱們的組件第一次呈現時建立。在下一次渲染期間，useState爲咱們提供了當前狀態。不然它根本不會是「狀態」！Hook名稱老是從use開始也是有緣由的。咱們將在後來的rules hooks中瞭解緣由。

讀取狀態

當咱們想要在類中顯示當前計數時，咱們讀取this.state.count：

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

在函數中，咱們能夠直接使用count：

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

更新狀態

在一個類中，咱們須要調用this.setState來更新count狀態:

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

在函數中，咱們已經將setCount和count做爲變量，所以咱們不須要this：

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

歸納

如今讓咱們回顧一下咱們逐行學習的內容並檢查咱們的理解。

1:  import { 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:  }
複製代碼

• 第1行： 咱們從React導入useState Hook。它容許咱們將本地狀態保存在功能組件中。
• 第2行： 在Example組件中，咱們經過調用useState Hook來聲明一個新的狀態變量。它返回一對值，咱們給它們命名。咱們調用變量count，由於它包含按鈕點擊次數。 咱們經過傳遞0做爲惟一的useState參數將其初始化爲零。第二個返回的項自己就是一個函數。它容許咱們更新count，所以咱們將其命名爲setCount。
• 第9行： 當用戶點擊時，咱們使用新值調用setCount。而後，React將從新呈現Example組件，並將新count值傳遞給它。

一開始看起來彷佛有不少東西須要考慮。不要急於求成！若是你在解釋有不瞭解的，請再次查看上面的代碼並嘗試從上到下閱讀。咱們保證，一旦你試圖「忘記」狀態如何在class上工做，並以新的角度看待這個代碼，它就會有意義。

提示：方括號意味着什麼？

當咱們聲明一個狀態變量時，你可能已經注意到方括號：

const [count, setCount] = useState(0);
複製代碼

左側的名稱不是React API的一部分。你能夠命名本身以爲合適的狀態變量：

const [fruit, setFruit] = useState('banana');
複製代碼

此JavaScript語法稱爲「數組解構」。這意味着咱們正在建立兩個新變量fruit和setFruit，其中fruit設置爲useState返回的第一個值，setFruit是第二個。等同於下面的代碼：

var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair
複製代碼

當咱們使用useState聲明一個狀態變量時，它返回一對 - 一個包含兩個項的數組。第一項是當前值，第二項是容許咱們更新第一項值的函數。使用[0]和[1]訪問它們有點使人困惑，由於它們具備特定含義。這就是咱們使用數組解構的緣由。

注意: 你可能很好奇React如何知道哪一個組件useState對應，由於咱們沒有將這樣的任何內容傳遞給React。咱們將在FAQ部分回答這個問題和許多其餘問題。

提示：使用多個狀態變量

將狀態變量聲明爲一對[something，setSomething]也很方便，由於若是咱們想要使用多個狀態變量，它可讓咱們爲不一樣的狀態變量賦予不一樣的名稱：

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  //...
}
複製代碼

在上面的組件中，咱們將age，fruit和todos做爲局部變量，咱們能夠單獨更新它們：

function handleOrangeClick() {
    // Similar to this.setState({ fruit: 'orange' })
    setFruit('orange');
  }
複製代碼

你 沒必要使用 許多狀態變量。 狀態變量能夠很好地保存對象和數組，所以仍然能夠將相關數據組合在一塊兒。可是，與類中的this.setState不一樣，更新狀態變量老是替換它而不是合併它。

咱們在FAQ中提供了有關拆分獨立狀態變量的更多建議。

本文原文地址