掌握 React 的 useState Hook：基础知识和高级用例-js教程-PHP中文网

掌握 React 的 useState Hook：基础知识和高级用例

DDD

发布： 2024-12-20 00:10:09

原创

383 人浏览过

Mastering React

React 中的 useState Hook

useState 钩子是 React 中最常用的钩子之一。它允许您向功能组件添加状态。在引入钩子之前，状态只能在类组件中使用，但 useState 也允许您在功能组件中拥有状态。这使得功能组件更加强大和灵活。

什么是 useState？

useState 是一个使您能够在功能组件中声明状态变量的函数。它返回一个包含两个元素的数组：

当前状态值 — 您可以在组件中访问和显示的实际状态值。
更新状态的函数 - 允许您更改状态变量值的函数。

语法

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

登录后复制

state 是当前状态值。
setState 是用于更新状态的函数。
initialState 是组件首次渲染时状态的初始值。

用法示例

基本示例：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

登录后复制

说明：
- useState(0) 将初始计数值设置为 0。
- setCount 用于在单击按钮时更新计数，这会触发使用更新后的计数重新渲染。

使用功能更新：

当新的状态依赖于之前的状态时，可以将一个函数传递给setState。这确保更新是根据最新的状态值进行的。

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

登录后复制

说明： 这里，prevCount 是之前的状态值，函数根据该值返回新的状态。

多个状态变量：

您可以在组件内多次使用 useState 来管理不同的状态。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

登录后复制

说明：这里，两个单独的状态变量（计数和名称）是独立管理的。

延迟初始化

如果初始状态很复杂或需要计算，您可以将一个函数传递给 useState，该函数仅在组件首次渲染时运行。

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

登录后复制

说明：如果您想根据需要在初始渲染期间计算一次的计算或副作用来初始化状态，此技术非常有用。

使用对象或数组更新状态

如果您的状态是对象或数组，则 setState 函数仅更新您提供的状态的特定部分。 React 不执行深度合并，因此如果您想更改状态对象的任何部分，您需要显式更新整个状态对象。

更新对象状态：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

登录后复制

说明： setUser 用于通过传播先前的状态并更改 name 属性来更新状态对象。

更新数组状态：

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

登录后复制

解释： 我们使用扩展运算符 (...prevItems) 创建一个包含先前项目和新项目 ('orange') 的新数组。

要避免的常见陷阱

直接修改状态：切勿直接修改状态（例如，state = newState）。始终使用 setState 函数来确保 React 正确更新 DOM。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

登录后复制