超越传统，React Hooks 用例宝典

在 React 的世界里，我们常会面对各种组件开发需求，从简单的展示型 UI 组件到复杂的数据处理容器组件。随着 Hooks 的出现，我们获得了在函数组件中使用状态和生命周期的方法，彻底打破了传统组件的束缚。

本篇文章将通过十个生动有趣的案例，带你深入探索 React Hooks 的精妙之处。

案例一：计数器组件

这是一个最简单的 Hooks 应用场景，我们使用 useState 来管理计数器的状态，并通过按钮操作更新计数器值。

import React, { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={incrementCount}>增加</button>
    </div>
  );
};

export default Counter;

案例二：表单组件

在表单组件中，我们需要跟踪用户输入的数据，并根据输入值进行验证。我们可以使用 useState 来管理表单字段的状态，并使用 useEffect 来监听表单提交事件，进行数据验证和提交。

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

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();

    // 数据验证
    if (name && email) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  };

  useEffect(() => {
    // 表单提交后，重置表单字段的状态
    if (isValid) {
      setName('');
      setEmail('');
      setIsValid(false);
    }
  }, [isValid]);

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">姓名：</label>
      <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />

      <label htmlFor="email">邮箱：</label>
      <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />

      <button type="submit">提交</button>
    </form>
  );
};

export default Form;

案例三：数据请求组件

在数据请求组件中，我们需要向后端发送请求，获取数据并更新组件的状态。我们可以使用 useState 来管理组件的状态，并使用 useEffect 来监听组件的挂载和更新，执行数据请求。

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

const DataRequest = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 组件挂载后，发送数据请求
    fetch('https://example.com/api/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>数据请求</h1>
      <ul>
        {data.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
};

export default DataRequest;

案例四：计时器组件

在计时器组件中，我们需要实现倒计时功能，随着时间的推移更新组件的状态。我们可以使用 useState 来管理计时器状态，并使用 useEffect 来监听计时器的变化，更新组件的 UI。

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

const Timer = () => {
  const [seconds, setSeconds] = useState(60);

  useEffect(() => {
    // 每秒更新计时器状态
    const interval = setInterval(() => {
      setSeconds(seconds - 1);
    }, 1000);

    // 计时器结束时，清除计时器
    if (seconds <= 0) {
      clearInterval(interval);
    }

    return () => {
      // 组件卸载时，清除计时器
      clearInterval(interval);
    };
  }, [seconds]);

  return (
    <div>
      <h1>计时器：{seconds}</h1>
    </div>
  );
};

export default Timer;

案例五：模态框组件

在模态框组件中，我们需要控制模态框的显示和隐藏。我们可以使用 useState 来管理模态框的状态，并使用 useEffect 来监听组件的挂载和更新，控制模态框的显示。

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

const Modal = () => {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    // 组件挂载后，监听键盘事件，按 Esc 键关闭模态框
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') {
        setShowModal(false);
      }
    });

    // 组件卸载时，移除键盘事件监听器
    return () => {
      document.removeEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
          setShowModal(false);