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] 。

请参见下面的更多示例。

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

set 函数，例如 setSomething(nextState)

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

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

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

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

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

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

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

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