How does the useState Hook work?

useState 是 React 中的一个钩子（Hook），允许函数组件保持本地状态。在之前的 React 版本中，只有类组件才能使用状态。useState 的引入使得函数组件也能够像类组件一样使用状态了。

基本用法

基本语法如下：

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

• useState 函数接收初始状态作为参数，并返回两个值：当前状态（state）和更新状态的函数（setState）。
• initialState 可以是一个固定的值或者是一个函数，如果是函数，该函数的返回值将作为初始状态。
• state 用于获取当前组件中的状态值。
• setState 是一个函数，用于更新状态。当状态更新后，组件将重新渲染。

示例

假设我们正在开发一个简单的计数器应用：

javascript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 设置初始状态为 0

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

在这个例子中：

• 我们调用 useState(0) 初始化 count 状态为 0。
• setCount 函数用来更新 count。每当按钮被点击时，setCount 被调用以增加或减少 count。
• 每次状态变化时，React 会重新渲染 Counter 组件，以反映最新的计数值。

工作原理

当 setState 被调用时，React 将计划一个更新，以异步方式重新渲染组件。这意味着 React 会在内存中重新运行组件函数，获取最新的 JSX，并与之前的 JSX 进行比较。如果有差异，React 则更新 DOM 以匹配最新状态的组件渲染输出。

保证函数更新

在某些情况下，状态更新可能依赖于先前的状态。React 保证 setState 函数的更新是安全的，即使在异步事件或延迟响应中，也能保证获取到最新的状态。例如，如果我们想要确保计数器递增操作始终基于最新的状态，我们可以这样写：

javascript
setCount(prevCount => prevCount + 1);

这里，我们给 setCount 传递了一个函数而非固定值。这个函数接收上一个状态值 prevCount 作为参数，并返回更新后的状态。

总结来说，useState 为函数组件提供了维护状态的能力，使得编写组件更加简洁和直观。