React Hooks 学习笔记 | State Hook（一）

大家好，小编最近在梳理 React Hook 的相关内容，由于看视频、看书、自己做项目总觉得缺点什么，总觉得看过了，内容太简单，有啥好写的？但是过了一段时间，感觉有些东西又模糊了。同时又觉得怕简单，写了也不一定有人看。但是想想，还是整理成文章分享出来，查漏补缺，用自己的思路和语言整理出来，方便日后的复习和查看，也希望能帮助到初学者入门。

一、开篇

React Hooks 无疑是目前 React  最令人兴奋着迷的特性之一，你可以使用更简单的函数编程的思维创建更加友好的组件。以往只有类组件才有状态管理和各种生命状态钩子函数，现在 React 16 及以后版本可以使用 useState Hooks 函数式的声明方式管理数据状态，简化生命周期相关的钩子函数等。

换句话说，我们构建React组件时不需要通过类的形式进行定义，Hooks 是一项革命性的功能，它将简化您的代码，使其易于阅读、维护、测试以及在你的项目中进行重用。现在你只需要花极短的时间进行熟悉它们，剩下的就是在实践中掌握它们。

二、环境准备

为了快速上手，小编还是建议使用官方的脚手架 Create React App ，安装命令如下：

npm i -g create-react-app

全局完成安装后，你就可以开始创建 React 应用了

npx create-react-app myapp

创建完成后，在项目目录下运行命令，启动你的 React 项目

cd myapp
npm start

三、类组件中的 State 状态管理

在学习 Hooks 中的状态管理之前，我们先复习下，在类组件中怎么进行状态管理的，有了对比，才能更好的理解  Hooks 的状态管理。示例代码如下：

import React from "react";
export default class ClassDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Agata"
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }
  handleNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  render() {
    return (
      <p>
        <form autoComplete="off">
          <p>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              id="name"
              value={this.state.name}
              onChange={this.handleNameChange}
            />
          </p>
        </form>
        <p>Hello {this.state.name}</p>
      </p>
    );
  }
}

注：如果你是通过 Create React App 创建项目，只需要将 App.js 里的内容替换成上述内容即可。

运行你的应用程序，在浏览器里，你将会看到如下效果：

接下来，给自己一点时间，去理解上述的代码，我们在构造函数里，使用 this 的方式声明了 name 状态，并将一个 handleNameChange 函数绑定到组件实例中。在函数中，我们通过 this.setState 的方式改变状态的值。当用户在文本输入框输入值时，就会触发 handleNameChange 函数，更改 name 的状态值。

四、Hooks 中的状态管理 useState

现在，我们将使用 useState Hook 的方式改写类组件，它的语法如下所示：

const [state, setState] = useState(initialState);

useState 函数将返回一个包含两个元素的数组：

• state: the name of your state—such as this.state.name or this.state.location（定义的数据状态）

• setState: a function for setting a new value for your state. Similar to this.setState({name: newValue})（定义更改状态的函数或直接返回状态的值，组件状态值改变，就会触发re-render）

initialState 参数，则是初始化 state 状态的默认值（可以通过函数的形式返回值）。

基于以上基础知识后，我们来改下第三部分类组件的声明方式，示例代码如下：

import React, { useState } from "react";
export defa