hook实现阻止功能_状态 Hook

背景

在 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} timesp>13        <button onClick={() => this.setState({ count: this.state.count + 1 })}>14          Click me15        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} timesp>10      <button onClick={() => setCount(count + 1)}>11        Click me12      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

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

在函数中，我们可以直接使用 count:

1

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

状态变量更新

在类中，我们需要调用 this.setState() 来更新 count 状态:

1 this.setState({ count: this.state.count + 1 })}>2          Click me3        </button>4

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

1 setCount(count + 1)}>2        Click me3      </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 ----------

长按关注我们