React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。其中，useState 是最基础也是使用最频繁的一个 Hook。

useState 的基本使用

useState 用于在函数组件中添加 state。以下是一个简单的例子：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

在上面的例子中，我们定义了一个名为 Counter 的组件。它使用 useState 创建了一个名为 count 的 state 变量，初始值为 0。我们还定义了一个 setCount 函数，用于更新 count 的值。

useState 的特点

  • 函数式组件使用：useState 可以在函数组件中使用，而不需要类。
  • 状态提升：useState 可以帮助我们在组件树中共享状态。
  • 纯函数：使用 useState 的组件仍然是纯函数。

useState 的使用限制

  • 异步更新：useState 的更新是异步的，这意味着你需要在更新 state 后立即调用其他操作时，需要使用回调函数。
  • 避免使用索引访问：不要在 useState 的回调函数中使用索引访问 state，这可能导致意外的行为。

总结

useState 是 React Hooks 中最基础的一个，它可以帮助我们在函数组件中管理状态。虽然 useState 有一些限制，但它仍然是一个非常强大的工具。

[了解更多关于 React Hooks 的内容](/React/教程/Hooks/React Hooks 详解)

React Hooks