前端实用技巧 | 自定义React Hook实战指南，轻松搞定自定义React Hook设计

import { useState, useEffect } from 'react';

/**
 * 自定义 Hook，用于获取和监听浏览器窗口的宽度。
 * @returns {number} 当前窗口的宽度。
 */
function useWindowWidth() {
  // 使用 useState 来创建一个状态变量 width，并初始化为当前窗口的宽度
  const [width, setWidth] = useState(window.innerWidth);

  // 使用 useEffect 来添加和移除窗口大小变化的事件监听器
  useEffect(() => {
    // 定义一个函数，用于在窗口大小变化时更新 width 状态
    const handleResize = () => setWidth(window.innerWidth);
    // 添加窗口大小变化的事件监听器
    window.addEventListener('resize', handleResize);
    // 在组件卸载时移除事件监听器，以避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空数组作为依赖项，表示这个 effect 只在组件挂载和卸载时运行

  // 返回当前窗口的宽度
  return width;
}

import { useState, useEffect } from 'react';

/**
 * useFetch 是一个自定义的 React Hook，用于从指定的 URL 获取数据。
 * 
 * @param {string} url - 要获取数据的 URL。
 * @returns {Object} - 包含以下属性的对象：
 *   - data: 获取到的数据，如果请求尚未完成或失败，则为 null。
 *   - loading: 一个布尔值，表示请求是否正在进行中。
 *   - error: 如果请求失败，则为错误对象，否则为 null。
 */
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 使用 useEffect 来处理副作用，这里是在组件挂载和 url 变化时执行 fetchData 函数
  useEffect(() => {
    // 定义一个异步函数 fetchData，用于获取数据
    const fetchData = async () => {
      try {
        // 使用 fetch API 发送 GET 请求到指定的 url
        const response = await fetch(url);
        // 将响应解析为 JSON 格式
        const result = await response.json();
        // 使用 setData 更新 data 状态
        setData(result);
      } catch (err) {
        // 如果请求失败，使用 setError 更新 error 状态
        setError(err);
      } finally {
        // 无论请求成功与否，都使用 setLoading 更新 loading 状态为 false
        setLoading(false);
      }
    };

    // 调用 fetchData 函数
    fetchData();
  }, [url]); // 依赖项数组中只有 url，意味着只有当 url 变化时，才会重新执行 useEffect 中的函数

  // 返回一个包含 data、loading 和 error 的对象
  return { data, loading, error };
}

import { useState } from 'react';

/**
 * useForm 是一个自定义的 React Hook，用于处理表单的状态和验证。
 * 
 * @param {Object} initialValues - 表单的初始值。
 * @param {Function} validate - 一个函数，用于验证表单的值。
 * @returns {Object} - 包含以下属性的对象：
 *   - values: 表单的当前值。
 *   - errors: 表单的当前错误。
 *   - handleChange: 一个函数，用于处理表单字段的变化。
 *   - handleSubmit: 一个函数，用于处理表单的提交。
 */
function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  /**
   * handleChange 是一个函数，用于处理表单字段的变化。
   * 
   * @param {Object} e - 事件对象。
   */
  const handleChange = e => {
    // 从事件对象中解构出 name 和 value
    const { name, value } = e.target;
    // 使用 setValues 更新 values 状态，保留之前的值，并更新变化的字段
    setValues({
      ...values,
      [name]: value,
    });
  };

  /**
   * handleSubmit 是一个函数，用于处理表单的提交。
   * 
   * @param {Object} e - 事件对象。
   */
  const handleSubmit = e => {
    // 阻止默认的表单提交行为
    e.preventDefault();
    // 调用 validate 函数，传入当前的 values，获取验证错误
    const validationErrors = validate(values);
    // 使用 setErrors 更新 errors 状态
    setErrors(validationErrors);
    // 如果没有验证错误，执行提交表单的逻辑
    if (Object.keys(validationErrors).length === 0) {
      // 提交表单
    }
  };

  // 返回一个包含 values、errors、handleChange 和 handleSubmit 的对象
  return {
    values,
    errors,
    handleChange,
    handleSubmit,
  };
}

import { useState, useEffect } from 'react';

/**
 * useInterval 是一个自定义的 React Hook，用于在组件中设置和清除定时器。
 * 
 * @param {Function} callback - 定时器回调函数。
 * @param {number} delay - 定时器延迟时间（毫秒）。
 */
function useInterval(callback, delay) {
  // 这里是在组件挂载和 callback、delay 变化时执行定时器的设置和清除
  useEffect(() => {
    // 设置一个定时器
    const id = setInterval(callback, delay);
    // 返回一个清除定时器的函数，在组件卸载或 callback、delay 变化时执行
    return () => clearInterval(id);
  }, [callback, delay]); // 依赖项数组中包含 callback 和 delay，意味着只有当它们变化时，才会重新执行 useEffect 中的函数
}