10 使用 Hooks 管理状态

在学习 React 的过程中，Hooks 是一个非常重要的特性，特别是 useState 和 useEffect，它们为函数组件带来了更加灵活的状态管理和副作用处理。本节将详细介绍如何使用这些 Hooks 来管理组件状态。

1. 什么是 Hooks？

Hooks 是在 React 16.8 中引入的特性，使得在函数组件中使用状态和其他 React 特性变得更加简单。最常用的两个 Hooks 是：

• useState：用于在函数组件中管理状态。
• useEffect：用于处理副作用，例如数据获取和订阅。

2. 使用 useState 管理状态

2.1 基本用法

useState 是一个函数，接受初始状态作为参数，返回一个数组，数组的第一个元素是当前状态，第二个元素是更新该状态的函数。

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为 count 的 state 变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

2.2 状态的更新

setCount 函数用于更新 count 的值。当你调用 setCount 时，组件会重新渲染，以显示最新的状态。

2.3 使用函数更新状态

如果新的状态依赖于旧的状态，建议使用函数形式的 setState。

<button onClick={() => setCount(prevCount => prevCount + 1)}>增加</button>

3. 使用 useEffect 处理副作用

3.1 基本用法

useEffect 用于在组件渲染后执行副作用，比如数据获取、手动 DOM 操作等。

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>获取到的数据：</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3.2 依赖数组

useEffect 的第二个参数是一个依赖数组，只有当依赖项发生变化时，副作用才会重新执行。如果传入一个空数组 []，则副作用只在组件挂载和卸载时执行。

3.3 清理副作用

如果副作用需要清理（例如，订阅），可以在 useEffect 的返回函数中执行清理逻辑。

useEffect(() => {
  const subscription = subscribeToSomeData();

  return () => {
    subscription.unsubscribe(); // 清理逻辑
  };
}, []);

4. 综合示例：计数器与数据获取

结合 useState 和 useEffect，我们可以创建一个更复杂的组件，既可以计数也能够获取数据。

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>

      <h1>获取到的数据：</h1>
      {loading ? <div>加载中...</div> : <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

5. 总结

• useState 允许函数组件管理状态，提供当前状态值和更新函数。
• useEffect 用于处理副作用，支持依赖管理和清理功能。
• 使用函数更新状态可以避免闭包问题。

通过掌握 useState 和 useEffect，你将能够有效地在 React 函数组件中管理状态和副作用，这是现代 React 开发的重要组成部分。