React Hooks 使用指南：useState 的基础用法和进阶技巧

2023-01-23 03:14:26

useState Hook：函数式组件中的状态管理利器

1. useState 基础简介

在 React 世界中，useState Hook 扮演着至关重要的角色，让我们能在函数式组件中高效管理状态。它的使用方法相当简单，只需在组件函数中调用 useState，传入初始状态值即可。

代码示例：

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
};

export default MyComponent;

在这个例子中，我们通过调用 useState，初始化了一个名为 count 的数字状态。返回的数组包含两个元素：状态值 count 和更新函数 setCount，用于更新状态。

2. useState 进阶技巧

除了基础用法，useState 还有不少进阶技巧，帮助我们编写更复杂的组件。

2.1 使用对象或数组作为状态值

useState 不仅限于管理基本类型（如数字或布尔值），它还可以处理对象或数组。

代码示例：

import React, { useState } from 'react';

const MyComponent = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });
  const [todos, setTodos] = useState([]);

  return (
    <div>
      <h1>User: {user.name}</h1>
      <h1>Age: {user.age}</h1>
      <button onClick={() => setUser({ ...user, age: user.age + 1})}>+</button>
      <button onClick={() => setTodos([...todos, 'New Todo'])}>Add Todo</button>
    </div>
  );
};

export default MyComponent;

这个例子中，我们使用了 useState 来管理一个 user 对象和一个 todos 数组。我们可以通过调用 setUser 和 setTodos 函数来更新它们。

2.2 函数式状态值更新

在某些情况下，我们希望根据上一个状态值更新当前状态值。useState 允许我们使用函数作为更新函数。

代码示例：

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </div>
  );
};

export default MyComponent;