React 中的 useState() 是什么？

在 React 中，useState() 是一种用于在函数组件中使用 state 的 hook。使用 useState()，可以使函数组件拥有和 class 组件同样的功能，即在组件中存储和更新状态。

使用方法

useState() 接收一个初始值作为参数，返回一个数组，数组包括当前 state 和一个更新当前 state 的函数。可以将这个数组解构并分别赋值给两个变量。

import React, { useState } from 'react';

function Example() {
  // 声明一个新的 state 变量，名为 count
  const [count, setCount] = useState(0);

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

在这个例子中，useState() 将初始值 0 分配给 count，count 变量包含在数组中。setCount 是更新 count 变量的函数，它将新的 count 值传递给 setCount。

当“Click me”按钮被点击时，React 会重新渲染 Example 组件，并将更新后的值传递给 count。此时，组件会重新渲染，并显示更新后的 count 值。

注意事项

• 使用多个 useState() 调用可以在组件中使用多个 state 变量。
• useState() 可以是任何 JavaScript 数据类型，包括对象和数组。
• 不要直接修改 state 变量，而是使用更新函数进行修改。
• useState() 的更新是异步的，React 会尽其所能合并多个 state 更新，并在必要时批量地更新组件。
• 当 state 发生变化时，React 会重新渲染组件。如果性能受到影响，可以使用 useMemo 和 useCallback 进行优化。

useState() 是 React 中一种常用的 hook，使得函数式组件拥有了与 class 组件同等的状态管理能力。如果您希望使用 React 的最新语法并掌握更多的 React 技术，请仔细学习和使用 useState()。