自定义 Hook 和路由钩子函数：实战指南

前言

在 React 中，自定义 Hook 和路由钩子函数是两个强大的工具，可以帮助我们构建更复杂、更灵活的应用程序。自定义 Hook 允许我们创建和共享可重用的逻辑，而路由钩子函数允许我们拦截和处理路由事件。在本文中，我们将详细探讨这两个特性，并通过示例展示如何使用它们来构建更强大的 React 应用程序。

什么是自定义 Hook？

自定义 Hook 是标准的封装和共享逻辑的方式。自定义 Hook 是一个函数，其名称以 use 开头。自定义 Hook 其实就是逻辑和内置的 Hook 的组合。

实例一：封装共有请求

import { useState } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetch = async () => {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetch();
  }, [url]);

  return { data, error, loading };
};

这个自定义 Hook 可以用于任何需要从 API 获取数据的组件中。它将数据、错误和加载状态作为参数返回，因此我们可以在组件中轻松使用它们。

实例二：封装表单状态

import { useState } from 'react';

const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

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

    // TODO: 表单验证

    // 表单验证通过后，提交表单
    console.log(values);
  };

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

这个自定义 Hook 可以用于任何需要表单的组件中。它将表单值、错误、处理更改和提交表单的函数作为参数返回，因此我们可以在组件中轻松使用它们。

什么是路由钩子函数？

路由钩子函数允许我们拦截和处理路由事件。React Router 提供了多个路由钩子函数，包括：

• useLocation()：获取当前的 location 对象。
• useNavigate()：用于导航到另一个页面。
• useParams()：获取当前页面的参数。
• useRouteMatch()：检查当前页面是否匹配给定的路径模式。

实例一：防止未授权访问

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const navigate = useNavigate();

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem('user'));
    if (!user) {
      navigate('/login');
    }
  }, []);

  return <Component {...rest} />;
};

这个路由钩子函数用于防止未授权用户访问受保护的页面。它会检查 localStorage 中是否有 user 项，如果没有，则导航到登录页面。

实例二：滚动到页面顶部

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = () => {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return null;
};

这个路由钩子函数用于在每次页面切换时滚动到页面顶部。它使用 useLocation() Hook 来检测当前的 location 对象是否发生变化，如果变化，则滚动到页面顶部。

总结

自定义 Hook 和路由钩子函数是 React 中两个强大的工具，可以帮助我们构建更复杂、更灵活的应用程序。自定义 Hook 允许我们创建和共享可重用的逻辑，而路由钩子函数允许我们拦截和处理路由事件。在本文中，我们详细探讨了这两个特性，并通过示例展示了如何使用它们来构建更强大的 React 应用程序。