Reac16.7的State Hook

作者: xiaohesong | 来源:发表于2018-10-30 17:03 被阅读8次

在之前的的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中提供了有关拆分独立状态变量的更多建议。

更多的hooks介绍

本文原文地址

Reac16.7的State Hook

等价的类示例

Hooks和函数组件

什么是Hook

声明一个状态变量

读取状态

更新状态

概括

提示：方括号意味着什么？

提示：使用多个状态变量

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react