狀態 Hook (React)

React · 發表 2019-04-11 10:04:16

摘要：背景在 Hook 出現之前，為實現一個計數器的功能，我們最常用的做法是在react class 的建構函式中宣告一個 count的狀態變數，然後通過在點選事件中呼叫 this.setState 方法對 count 進行遞增操作。案例程式碼如下： 1clas...

背景

在 Hook 出現之前，為實現一個計數器的功能，我們最常用的做法是在react class 的建構函式中宣告一個 count的狀態變數，然後通過在點選事件中呼叫 this.setState 方法對 count 進行遞增操作。

案例程式碼如下：

 1class Example extends React.Component {
 2constructor(props) {
 3super(props);
 4this.state = {
 5count: 0
 6};
 7}
 8
 9render() {
10return (
11<div>
12<p>You clicked {this.state.count} times</p>
13<button onClick={() => this.setState({ count: this.state.count + 1 })}>
14Click me
15</button>
16</div>
17);
18}
19}

以上程式碼有兩個核心點

constructor 初始化 state 的count值為 0
通過 this.setState 改變 count 值。

效果如下圖所示：

圖 1

接下來我們再看下通過 state hook 如何來實現以上效果。

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

在這裡，我們使用了 React中的函式元件（在以前我們也稱之為“無狀態元件”）：

1function Example(props) {
2return <div/>;
3}

Hooks 無法在 class 中應用，只能通過元件函式來替代。

那什麼是Hooks呢

Hook 是一種特殊的能力，可以讓您“間接使用”React的功能。useState就是一個 Hook，它允許您將 React狀態新增到功能元件。

如果要編寫一個函式元件並需要為它新增一些狀態，那麼之前的做法是必須將它轉化為一個類，現在您可以在現有的元件中使用Hook。(關於哪裡可以使用Hook，我們在後面的文章中進行介紹)

狀態變數宣告

在函式元件中，因為沒有 this，所以無法使用this.state 。只能通過 useState 直接在元件內部呼叫 Hook：

1import { useState } from 'react';
2
3function Example() {
4const [count, setCount] = useState(0);
5}

從 React 匯入 useState Hook，它允許我們將本地狀態儲存在功能元件中。
useState: 主要目的是宣告“狀態變數”，變數可以是任意值。功能類同 this.state，通常當函式退出時，變數消失，但狀態變數由react保留。
useState() Hook 的唯一引數是初始狀態。與類不同，狀態不必是物件。可以是一個數字或一個字串。
useState 返回一對值：當前狀態和更新它的函式。const [count, setCount] = useState() 類似於類中的 this.state.count 和 this.setState。

狀態變數呼叫

在類中使用當前的計數時，直接通過 this.state.count

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

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

1<p> You clicked {count} times. </p>
2

狀態變數更新

在類中，我們需要呼叫 this.setState() 來更新 count 狀態:

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

在函式中，我們已經擁有了 setCount 與 count 作為變數，所以我們不需要使用 this：

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

提示資訊

`[]`的使用

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

左側的名稱不是React API的一部分，您可以命名自己的狀態變數。這種語法在

JavaScript 中稱之為 “陣列結構”，與一下方式等同

1var countStateVariable = useState(0);
2var count = countStateVariable[0];
3var setCount = countStateVariable[1];

使用多個狀態變數

1function Example() {
2const [name, setName] = useState('tom');
3const [count, setCount] = useState(0);
4const [todos, setTodos] = useState([{
5text: 'abc'
6}])
7}

這裡我們聲明瞭 name, count, todos作為區域性變數，我們可以單獨更新他們的值：

1function changeName() {
2setName('zhangsan');
3}

您不必使用許多狀態變數。狀態變數可以很好地儲存物件和陣列，所以您仍然可以將相關資料分組在一起。但是，與類中的this.setstate不同，更新狀態變數總是替換它，而不是合併它。

參考：https://reactjs.org/docs/hooks-overview.html

---------- END ----------

長按關注我們