React---自定义hookHooks Hooks 旨在解决在类组件中使用复杂逻辑、共享状态和处理副作用时的一些问题，

Hooks

Hooks 旨在解决在类组件中使用复杂逻辑、共享状态和处理副作用时的一些问题，使得函数式组件具有更多的能力和灵活性。

Hooks函数

1. useState：用于在函数式组件中添加和管理状态。useState 函数返回一个状态值和一个更新该状态的函数，使得我们可以在组件之间共享和更新状态。
1. useEffect：用于处理副作用操作，如订阅数据源、网络请求、事件监听等。useEffect 函数接收一个副作用函数，并在组件渲染时执行该函数。它还可以在组件更新或卸载时清理副作用。
1. useContext：用于在函数式组件中访问React上下文。useContext 函数接收一个上下文对象并返回其当前值。它有效地消除了类组件中使用 static contextType 和 this.context 的需求。

还有如 useReducer、useCallback、useMemo、useRef 等，以满足不同的需求和场景。

useMemo

目的：通过缓存计算结果，避免在组件渲染时进行不必要的重复计算，提高性能。（只有当其依赖项发生变化时，useMemo才会重新计算这个值，否则会用之前的结果）格式

const cachedValue = useMemo(calculateValue,dependencies)

calculateValue:用于计算需要缓存的值的函数。
dependencies：是一个数组，包含useMemo多依赖的变量或值。当数组中的任何值发生变化时，calculateValue函数将被重新执行

自定义Hooks

自定义Hooks通常以"use"开头，返回一个数组。例如“useForm”或"useTheme"

常用场景

状态管理：多个组件共享和管理相同的状态
副作用处理：数据订阅、网络请求、本地存储等
数据获取和处理：
表单处理：处理表单的逻辑，包括表单校验、表单提交、表单重置等
定时器和动画效果：可以实现定时器的启动、暂停、停止等操作
访问浏览器API：封装访问浏览器API的逻辑，如获取地理位置、访问本地存储、处理浏览器历史记录等
复杂逻辑封装：处理分页逻辑、排序逻辑、权限控制逻辑等

表单验证Hooks

import {useState} from 'react'

// 自定义表单验证Hooks
const useFormValidator = () => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});

  // 处理表单字段的变化
  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    // 执行验证逻辑
    const validationErrors = validate(values);
    setErrors(validationErrors);
    if (Object.keys(validationErrors).length === 0) {
      // 验证通过，执行提交逻辑
      submitForm(values);
    }
  };

  // 表单字段验证逻辑
  const validate = (values) => {
    let errors = {};

    // 进行具体的验证逻辑，根据需要添加更多验证规则
    if (!values.username) {
      errors.username = '请填写用户名';
    }

    if (!values.email) {
      errors.email = '请填写邮箱';
    } else if (!isValidEmail(values.email)) {
      errors.email = '请输入有效的邮箱地址';
    }

    // 返回验证错误信息
    return errors;
  };

  // 判断邮箱地址是否有效
  const isValidEmail = (email) => {
    // 简单的邮箱验证逻辑，根据需要可以进行更复杂的验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  return { values, errors, handleChange, handleSubmit };
};

// 使用自定义Hooks进行表单验证
function LoginForm() {
  const { values, errors, handleChange, handleSubmit } = useFormValidator();

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" value={values.username || ''} onChange={handleChange} />
      {errors.username && <span>{errors.username}</span>}
      <input type="email" name="email" value={values.email || ''} onChange={handleChange} />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit">提交</button>
    </form>
  );
}