useState

const [state, setState] = useState(initialState)

• 参考
  • useState(initialState)
  • set 函数，例如 setSomething(nextState)
• 用法
  • 向组件添加状态
  • 基于先前状态更新状态
  • 更新状态中的对象和数组
  • 避免重新创建初始状态
  • 使用键重置状态
  • 存储来自先前渲染的信息
• 故障排除
  • 我已经更新了状态，但是日志显示的是旧值
  • 我已经更新了状态，但是屏幕没有更新
  • 我收到错误：“重新渲染次数过多”
  • 我的初始化器或更新函数运行了两次
  • 我尝试将状态设置为函数，但是它却被调用了

参考

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 返回一个恰好包含两个值的数组

1. 当前状态。在第一次渲染期间，它将与您传入的 initialState 一致。
2. set 函数 允许您将状态更新为不同的值并触发重新渲染。

注意事项

• useState 是一个 Hook，因此您只能在组件的 顶级 或您自己的 Hook 中调用它。您不能在循环或条件内调用它。如果您需要这样做，请提取一个新的组件并将状态移入其中。
• 在严格模式下，React 将 调用您的初始化函数两次 以 帮助您查找意外的 impure 函数。 这只在开发环境中有效，不会影响生产环境。如果您的初始化函数是纯函数（应该如此），则这不会影响行为。其中一个调用的结果将被忽略。

set 函数，例如 setSomething(nextState)

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

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

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

参数

• nextState：您希望状态具有的值。它可以是任何类型的值，但函数具有特殊行为。
  • 如果您将函数作为 nextState 传递，它将被视为一个 *更新函数*。它必须是纯函数，应该将挂起的 state 作为其唯一参数，并应该返回下一个 state。React 将您的更新函数放入队列中并重新渲染您的组件。在下次渲染期间，React 将通过将所有排队的更新器应用于先前状态来计算下一个状态。请参见下面的示例。

返回值

set 函数没有返回值。

注意事项

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

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

• React 批量更新状态。它在 所有事件处理程序运行完毕 并调用其 set 函数后更新屏幕。这可以防止在单个事件期间多次重新渲染。如果您需要强制 React 更早更新屏幕（例如为了访问 DOM），可以使用 flushSync。

• set 函数具有稳定的标识，因此您经常会看到它从 Effect 依赖项中省略，但包含它不会导致 Effect 触发。如果 linter 允许您在没有错误的情况下省略依赖项，则可以安全地这样做。了解有关删除 Effect 依赖项的更多信息。

• 在渲染期间调用 set 函数仅允许在当前正在渲染的组件中进行。React 将丢弃其输出并立即尝试使用新状态重新渲染它。这种模式很少需要，但您可以使用它来 存储来自先前渲染的信息。请参见下面的示例。

• 在严格模式下，React 将 调用您的更新函数两次 以 帮助您查找意外的 impure 函数。 这只在开发环境中有效，不会影响生产环境。如果您的更新函数是纯函数（应该如此），则这不会影响行为。其中一个调用的结果将被忽略。

用法

向组件添加状态

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

import { useState } from 'react';

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

约定是用 数组解构 将状态变量命名为 [something, setSomething]。

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

1. 这个状态变量的当前状态，最初设置为您提供的初始状态。
2. 用于更改状态的set 函数，您可以响应交互将其更改为任何其他值。

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

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

React 将存储新状态，使用新值重新渲染您的组件，并更新 UI。

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

基于先前状态更新状态

假设age 是 42。此处理程序三次调用setAge(age + 1)

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

但是，单击一次后，age 将仅为 43 而不是 45！这是因为调用set 函数不会更新已经在运行的代码中的age 状态变量。因此，每个setAge(age + 1) 调用都变成setAge(43)。

要解决此问题，可以将更新函数传递给setAge，而不是传递新状态。

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

这里，a => a + 1 是您的更新函数。它接收挂起状态并从中计算新状态。

React 将您的更新函数放入队列中。然后，在下一次渲染期间，它将按相同的顺序调用它们。

1. a => a + 1 将接收42 作为挂起状态，并返回43 作为新状态。
2. a => a + 1 将接收43 作为挂起状态，并返回44 作为新状态。
3. a => a + 1 将接收44 作为挂起状态，并返回45 作为新状态。

没有其他排队的更新，因此 React 最终将45 存储为当前状态。

按照惯例，通常将挂起状态参数命名为状态变量名称的首字母，例如age 的a。但是，您也可以将其命名为prevAge 或您认为更清晰的名称。

React 可能会在开发中两次调用您的更新程序以验证它们是否纯净的。

更新状态中的对象和数组

你可以将对象和数组放入状态中。在 React 中，状态被认为是只读的，因此 你应该 *替换* 它，而不是 *修改* 你现有的对象。例如，如果你在状态中有一个 form 对象，不要修改它

// 🚩 Don't mutate an object in state like this:
form.firstName = 'Taylor';

相反，通过创建一个新的对象来替换整个对象

// ✅ Replace state with a new object
setForm({
  ...form,
  firstName: 'Taylor'
});

阅读 更新状态中的对象 和 更新状态中的数组 以了解更多信息。

避免重新创建初始状态

React 只保存一次初始状态，并在接下来的渲染中忽略它。

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  // ...

尽管 createInitialTodos() 的结果仅用于初始渲染，但你仍然在每次渲染时都调用此函数。如果它正在创建大型数组或执行昂贵的计算，这可能会造成浪费。

为了解决这个问题，你可以 将其作为 *初始化器* 函数 传递给 useState

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  // ...

请注意，你传递的是 createInitialTodos（即函数本身），而不是 createInitialTodos()（即调用它的结果）。如果你将函数传递给 useState，React 只会在初始化期间调用它。

React 可能会 在开发中调用你的初始化器两次 以验证它们是否 纯净的。

使用键重置状态

在渲染列表时，您经常会遇到key属性。但是，它还有另一个用途。

您可以通过向组件传递不同的key来重置组件的状态。在此示例中，“重置”按钮更改了version状态变量，我们将它作为key传递给Form。当key更改时，React会从头开始重新创建Form组件（及其所有子组件），因此其状态将被重置。

阅读保留和重置状态以了解更多信息。

存储来自先前渲染的信息

通常，您会在事件处理程序中更新状态。但是，在极少数情况下，您可能希望根据渲染来调整状态——例如，当道具更改时，您可能希望更改状态变量。

在大多数情况下，您不需要这样做

• 如果所需的值可以完全从当前道具或其他状态计算出来，完全删除冗余状态。如果您担心计算过于频繁，useMemo Hook可以提供帮助。
• 如果要重置整个组件树的状态，向您的组件传递不同的key。
• 如果可以，请在事件处理程序中更新所有相关状态。

export default function CountLabel({ count }) {
  return <h1>{count}</h1>
}