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

本文原文地址