Hook 簡介章節(jié)中使用下面的例子介紹了 Hook:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  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。整個章節(jié)中都將使用該 class 的代碼片段做示例。

Hook 和函數(shù)組件

復習一下， React 的函數(shù)組件是這樣的：

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

或是這樣：

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

你之前可能把它們叫做“無狀態(tài)組件”。但現(xiàn)在我們?yōu)樗鼈円肓耸褂?React state 的能力，所以我們更喜歡叫它”函數(shù)組件”。

Hook 在 class 內部是不起作用的。但你可以使用它們來取代 class 。

Hook 是什么？

在新示例中，首先引入 React 中 useState 的 Hook

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

• Hook 是什么？ Hook 是一個特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學習其他 Hook。
• 什么時候我會用 Hook？ 如果你在編寫函數(shù)組件并意識到需要向其添加一些 state，以前的做法是必須將其轉化為 class。現(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。

聲明 State 變量

在 class 中，我們通過在構造函數(shù)中設置 this.state 為 { count: 0 } 來初始化 count state 為 0：

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

在函數(shù)組件中，我們沒有 this，所以我們不能分配或讀取 this.state。我們直接在組件中調用 useState Hook：

import React, { useState } from 'react';
function Example() {
  // 聲明一個叫 “count” 的 state 變量
  const [count, setCount] = useState(0);

• 調用 useState 方法的時候做了什么? 它定義一個 “state 變量”。我們的變量叫 count， 但是我們可以叫他任何名字，比如 banana。這是一種在函數(shù)調用時保存變量的方式 —— useState 是一種新方法，它與 class 里面的 this.state 提供的功能完全相同。一般來說，在函數(shù)退出后變量就會”消失”，而 state 中的變量會被 React 保留。
• useState 需要哪些參數(shù)？ useState() 方法里面唯一的參數(shù)就是初始 state。不同于 class 的是，我們可以按照需要使用數(shù)字或字符串對其進行賦值，而不一定是對象。在示例中，只需使用數(shù)字來記錄用戶點擊次數(shù)，所以我們傳了 0 作為變量的初始 state。（如果我們想要在 state 中存儲兩個不同的變量，只需調用 useState() 兩次即可。）
• useState 方法的返回值是什么？ 返回值為：當前 state 以及更新 state 的函數(shù)。這就是我們寫 const [count, setCount] = useState() 的原因。這與 class 里面 this.state.count 和 this.setState 類似，唯一區(qū)別就是你需要成對的獲取它們。如果你不熟悉我們使用的語法，我們會在本章節(jié)的底部介紹它。

既然我們知道了 useState 的作用，我們的示例應該更容易理解了：

import React, { useState } from 'react';
function Example() {
  // 聲明一個叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

我們聲明了一個叫 count 的 state 變量，然后把它設為 0。React 會在重復渲染時記住它當前的值，并且提供最新的值給我們的函數(shù)。我們可以通過調用 setCount 來更新當前的 count。

注意

你可能想知道：為什么叫 useState 而不叫 createState?

“Create” 可能不是很準確，因為 state 只在組件首次渲染的時候被創(chuàng)建。在下一次重新渲染時，useState 返回給我們當前的 state。否則它就不是 state 了！這也是 Hook 的名字總是以 use 開頭的一個原因。我們將在后面的 Hook 規(guī)則中了解原因。

讀取 State

當我們想在 class 中顯示當前的 count，我們讀取 this.state.count：

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

在函數(shù)中，我們可以直接用 count:

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

更新 State

在 class 中，我們需要調用 this.setState() 來更新 count 值：

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

在函數(shù)中，我們已經有了 setCount 和 count 變量，所以我們不需要 this:

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

小結

現(xiàn)在讓我們來仔細回顧一下學到的知識，看下我們是否真正理解了。

import React, { useState } from 'react';
function Example() {
	const [count, setCount] = useState(0);
	return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
   );
}

• 第一行 - 引入React 中的 useState Hook。它讓我們在函數(shù)組件中存儲內部 state。
• 第四行 - 在 Example 組件內部，我們通過調用 useState Hook 聲明了一個新的 state 變量。它返回一對值給到我們命名的變量上。我們把變量命名為 count，因為它存儲的是點擊次數(shù)。我們通過傳 0 作為 useState 唯一的參數(shù)來將其初始化為 0。第二個返回的值本身就是一個函數(shù)。它讓我們可以更新 count 的值，所以我們叫它 setCount。
• 第九行 - 當用戶點擊按鈕后，我們傳遞一個新的值給 setCount。React 會重新渲染 Example 組件，并把最新的 count 傳給它。

提示：方括號有什么用？

你可能注意到我們用方括號定義了一個 state 變量

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

等號左邊名字并不是 React API 的部分，你可以自己取名字：

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

這種 JavaScript 語法叫數(shù)組解構。它意味著我們同時創(chuàng)建了 fruit 和 setFruit 兩個變量，fruit 的值為 useState 返回的第一個值，setFruit 是返回的第二個值。它等價于下面的代碼：

  var fruitStateVariable = useState('banana'); // 返回一個有兩個元素的數(shù)組
  var fruit = fruitStateVariable[0]; // 數(shù)組里的第一個值
  var setFruit = fruitStateVariable[1]; // 數(shù)組里的第二個值

當我們使用 useState 定義 state 變量時候，它返回一個有兩個值的數(shù)組。第一個值是當前的 state，第二個值是更新 state 的函數(shù)。使用 [0] 和 [1] 來訪問有點令人困惑，因為它們有特定的含義。這就是我們使用數(shù)組解構的原因。

提示：使用多個 state 變量

將 state 變量聲明為一對 [something, setSomething] 也很方便，因為如果我們想使用多個 state 變量，它允許我們給不同的 state 變量取不同的名稱：

function ExampleWithManyStates() {
  // 聲明多個 state 變量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '學習 Hook' }]);

在以上組件中，我們有局部變量 age，fruit 和 todos，并且我們可以單獨更新它們：

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

你不必使用多個 state 變量。State 變量可以很好地存儲對象和數(shù)組，因此，你仍然可以將相關數(shù)據(jù)分為一組。然而，不像 class 中的 this.setState，更新 state 變量總是替換它而不是合并它。

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容! 

最新評論