API 参考

钩子

useState

useState 是一个 React 钩子，可让你将状态变量添加到组件中。

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

`useState(initialState)`

在组件的顶层调用 useState 以声明状态变量。

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

约定是使用数组解构命名状态变量，例如 [something, setSomething] 。

请参阅下面的更多示例。


              initialState

: 你希望状态的初始值。它可以是任何类型的值，但函数有特殊的行为。这个参数在初始渲染后被忽略。

如果你将函数作为


              initialState

传递，它将被视为初始化函数。它应该是纯粹的，不带任何参数，并且应该返回任何类型的值。 React 在初始化组件时会调用你的初始化函数，并将其返回值存储为初始状态。请参见下面的示例。

useState 返回一个恰好包含两个值的数组：

当前状态。在第一次渲染期间，它将与你传递的


              initialState

相匹配。

set

函数允许你将状态更新为不同的值并触发重新渲染。


              useState

是一个钩子，只能 在组件的顶层 或者自己的钩子调用。你不能在循环或条件内调用它。如果需要，提取一个新组件并将状态移入其中。

在严格模式下，React 会为了帮助你发现意外杂质 调用你的初始化函数两次 。这是开发行为，不会影响生产。如果你的初始化函数是纯函数（它应该是纯函数），这应该不会影响行为。其中一个调用的结果将被忽略。

`set` 函数与 `setSomething(nextState)` 类似

useState 返回的 set 函数允许你将状态更新为不同的值并触发重新渲染。你可以直接传递下一个状态，或从前一个状态计算它的函数：

const [name, setName] = useState('Edward');





    

function handleClick() {
  setName('Taylor');
  setAge(a => a + 1);
  // ...


              nextState

: 你希望状态成为的值。它可以是任何类型的值，但函数有特殊的行为。

如果你将函数作为


              nextState

传递，它将被视为更新函数。它必须是纯粹的，应该将挂起状态作为其唯一参数，并且应该返回下一个状态。 React 会将你的更新程序函数放入队列中并重新渲染你的组件。在下一次渲染期间，React 将通过将所有排队的更新器应用于前一个状态来计算下一个状态。请参见下面的示例。

set 函数没有返回值。

set 函数 只更新下一次渲染的状态变量 。如果你在调用 set 函数后读取状态变量，则你仍然会得到旧的值在你调用之前显示在屏幕上。

如果你提供的新值与当前的 state 相同，由 Object.is 比较确定，React 将 跳过重新渲染组件及其子级。 这是一个优化。尽管在某些情况下 React 可能仍需要在跳过子级之前调用你的组件，但这不应该影响你的代码。

React 批量状态更新。它 在所有事件处理程序运行之后 更新屏幕并调用了它们的 set 函数。这可以防止在单个事件期间多次重新渲染。在极少数情况下，你需要强制 React 提前更新屏幕，例如访问 DOM，你可以使用 flushSync

在渲染期间调用 set 函数只能从当前渲染组件中调用。 React 将丢弃其输出并立即尝试使用新状态再次渲染它。这种模式很少需要，但你可以将它用于 存储先前渲染的信息 。请参见下面的示例。

在严格模式下，React 会为了帮助你发现意外杂质 调用你的更新函数两次 。这是开发行为，不会影响生产。如果你的更新程序函数是纯函数（它应该是纯函数），这应该不会影响行为。其中一个调用的结果将被忽略。

向组件添加状态

在组件的顶层调用 useState 以声明一个或多个状态变量。

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');
  // ...

约定是使用数组解构命名状态变量，例如 [something, setSomething] 。

useState 返回一个恰好包含两项的数组：

此状态变量的当前状态，初始设置为你提供的初始状态。

set

函数允许你将其更改为任何其他值以响应交互。

要更新屏幕上的内容，请使用下一个状态调用 set 函数：

function handleClick() {
  setName('Robin');
}

React 将存储下一个状态，使用新值再次渲染你的组件，并更新 UI。

易犯错误

调用 set 函数不会改变已经执行的代码中的当前状态：

function handleClick() {





    
  setName('Robin');
  console.log(name); // Still "Taylor"!
}

它只影响 useState 从下一次渲染开始返回的内容。

基本 useState 示例

例子 1 / 4 :
计数器（数字）

在此示例中， count 状态变量包含一个数字。单击该按钮会增加它。

复刻

import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>

useState

useState(initialState)

set 函数与 setSomething(nextState) 类似