React Hooks 详解之 useState

前言

关于 react hooks 的优点，这里就不详细阐述了，大家可以去查看 文档。 本文的主要重点是详细解释各种 hooks 的使用以及阐述一些简单的 hooks 实现来帮助我们理解 hooks。其中第一个 hooks 也是使用频率最高最重要的 Hooks 就是 useState。

useState

useState 的使用

Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性。而 useState 的功能就是让你在函数式组件中使用 state。 我们看下具体使用：

import React, { useState } from "react";
import ReactDom from "react-dom";

function Counter() {
  let [count, setCount] = useState(0); // 定义state:count
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

function render() {
  ReactDom.render(<Counter />, document.getElementById("root"));
}

render();

在上面的代码中，Counter组件是一个函数式组件，通过 useState 传入一个初始值，然后返回了 count 和 setCount。count 在组件每次被调用时都会发生变化，setCount 用于修改 count 的值，每次修改后都会触发 Count 组件的重新渲染。从上面的分析中，我们可以看到 useState 主要具有以下功能：

1. 接受一个参数作为初始化值
2. 返回一个数组，数组的第一个值为最新的状态 count，第二个值为一个函数用于修改状态 setCount
3. setCount 设置后需要触发重新渲染

useState 的初