React?Hook中如何使用State?Hook

今天小編給大家分享一下React Hook中如何使用State Hook的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Hook 簡介章節中使用下面的例子介紹了 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。整個章節中都將使用該 class 的代碼片段做示例。

Hook 和函數組件

復習一下， React 的函數組件是這樣的：

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

或是這樣：

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

你之前可能把它們叫做“無狀態組件”。但現在我們為它們引入了使用 React state 的能力，所以我們更喜歡叫它”函數組件”。

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

Hook 是什么？

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

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

• Hook 是什么？ Hook 是一個特殊的函數，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數組件中添加 state 的 Hook。稍后我們將學習其他 Hook。

• 什么時候我會用 Hook？ 如果你在編寫函數組件并意識到需要向其添加一些 state，以前的做法是必須將其轉化為 class。現在你可以在現有的函數組件中使用 Hook。

聲明 State 變量

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

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

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

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

• 調用 useState 方法的時候做了什么? 它定義一個 “state 變量”。我們的變量叫 count， 但是我們可以叫他任何名字，比如 banana。這是一種在函數調用時保存變量的方式 —— useState 是一種新方法，它與 class 里面的 this.state 提供的功能完全相同。一般來說，在函數退出后變量就會”消失”，而 state 中的變量會被 React 保留。

• useState 需要哪些參數？ useState() 方法里面唯一的參數就是初始 state。不同于 class 的是，我們可以按照需要使用數字或字符串對其進行賦值，而不一定是對象。在示例中，只需使用數字來記錄用戶點擊次數，所以我們傳了 0 作為變量的初始 state。（如果我們想要在 state 中存儲兩個不同的變量，只需調用 useState() 兩次即可。）

• useState 方法的返回值是什么？ 返回值為：當前 state 以及更新 state 的函數。這就是我們寫 const [count, setCount] = useState() 的原因。這與 class 里面 this.state.count 和 this.setState 類似，唯一區別就是你需要成對的獲取它們。如果你不熟悉我們使用的語法，我們會在本章節的底部介紹它。

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

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

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

注意

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

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

讀取 State

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

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

在函數中，我們可以直接用 count:

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

更新 State

在 class 中，我們需要調用 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>

小結

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

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。它讓我們在函數組件中存儲內部 state。

• 第四行 - 在 Example 組件內部，我們通過調用 useState Hook 聲明了一個新的 state 變量。它返回一對值給到我們命名的變量上。我們把變量命名為 count，因為它存儲的是點擊次數。我們通過傳 0 作為 useState 唯一的參數來將其初始化為 0。第二個返回的值本身就是一個函數。它讓我們可以更新 count 的值，所以我們叫它 setCount。

• 第九行 - 當用戶點擊按鈕后，我們傳遞一個新的值給 setCount。React 會重新渲染 Example 組件，并把最新的 count 傳給它。

提示：方括號有什么用？

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

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

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

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

提示：使用多個 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 變量可以很好地存儲對象和數組，因此，你仍然可以將相關數據分為一組。然而，不像 class 中的 this.setState，更新 state 變量總是替換它而不是合并它。

以上就是“React Hook中如何使用State Hook”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。