状态 Hook (React)

背景

在 Hook 出现之前,为实现一个计数器的功能,我们最常用的做法是在react class 的构造函数中声明一个 count的状态变量,然后通过在点击事件中调用 this.setState 方法 对 count 进行递增操作。

案例代码如下:

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

以上代码有两个核心点

  1. constructor 初始化 state 的count值为 0

  2. 通过 this.setState 改变 count 值。

效果如下图所示:

图 1

接下来我们再看下 通过 state hook 如何来实现以上效果。

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

在这里,我们使用了 React中的函数组件(在以前我们也称之为“无状态组件”):

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

Hooks 无法在 class 中应用,只能通过 组件函数来替代。

那什么是Hooks呢

Hook 是一种特殊的能力,可以让您“间接使用”React的功能。useState就是一个 Hook,它允许您将 React状态添加到功能组件。

如果要编写一个函数组件并需要为它添加一些状态,那么之前的做法是必须将它转化为一个 类, 现在您可以在现有的组件中使用Hook。(关于哪里可以使用Hook,我们在后面的文章中进行介绍)

状态变量声明

在函数组件中,因为没有 this,所以无法使用this.state 。只能通过 useState 直接在组件内部调用 Hook:

1import { useState } from 'react';
2
3function Example() {
4    const [count, setCount] = useState(0);
5}
  1. 从 React 导入 useState Hook, 它允许我们将本地状态保存在功能组件中。

  2. useState: 主要目的是声明“状态变量”,变量可以是任意值。功能类同 this.state,通常当函数退出时,变量消失,但状态变量由react保留。

  3. useState() Hook 的唯一参数是初始状态。与 类不同,状态不必是对象。可以是 一个数字或一个字符串。

  4. 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 })}>
2          Click me
3        </button>
4

在函数中,我们已经拥有了 setCount 与 count 作为变量,所以我们不需要使用 this:

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

提示信息

`[]`的使用

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

左侧的名称不是React API的一部分,您可以命名自己的状态变量。这种语法在

JavaScript 中称之为 “数组结构”,与一下方式等同

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

使用多个状态变量

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

这里我们声明了 name, count, todos作为局部变量,我们可以单独更新他们的值:

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

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

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

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

长按关注我们

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章