世界上最伟大的投资就是投资自己的教育

首页React
xiaohesong · 凡人

react16.7-alpha hooks 之 state

xiaohesong发布于1678 次阅读

在之前的的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

Hookclass不起 作用。但是你可以使用它们而不是编写类。

什么是 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.countthis.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>

在函数中,我们已经将setCountcount作为变量,因此我们不需要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语法称为 “数组解构”。这意味着我们正在创建两个新变量fruitsetFruit,其中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' }]);
  //...
}

在上面的组件中,我们将agefruittodos作为局部变量,我们可以单独更新它们:

function handleOrangeClick() {
    // Similar to this.setState({ fruit: 'orange' })
    setFruit('orange');
  }

不必使用 许多状态变量。 状态变量可以很好地保存对象和数组,因此仍然可以将相关数据组合在一起。但是,与类中的this.setState不同,更新状态变量总是替换它而不是合并它。

我们在 FAQ中提供了有关拆分独立状态变量的更多建议。

本文原文地址

下一章节effect请前往此处查看

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
统计信息
    学员: 29003
    视频数量: 1973
    文章数量: 489

© 汕尾市求知科技有限公司 | Rails365 Gitlab | Qiuzhi99 Gitlab | 知乎 | b 站 | 搜索

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top