react自定义hooks实际例子

好的，我可以给你一个实际的例子。假设你正在开发一个网站，需要在用户登录后检查用户的身份验证令牌。如果令牌过期，则需要将用户重定向到登录页面。为了实现这个功能，你可以编写一个自定义的React Hook，如下所示：

import { useEffect } from 'react';

function useAuth(token) {
  useEffect(() => {
    if (token && isTokenExpired(token)) {
      redirectToLogin();
    }
  }, [token]);
}

function isTokenExpired(token) {
  // 检查令牌是否过期
  return true; // 返回true表示过期
}

function redirectToLogin() {
  // 将用户重定向到登录页
}

export default useAuth;

在上面的代码中，`useAuth`是一个自定义Hook，它接受一个令牌作为参数。当令牌发生变化时，它会使用`useEffect`钩子来检查令牌是否过期。如果令牌过期，则会调用`redirectToLogin`函数将用户重定向到登录页面。

你可以在React组件中使用`useAuth`，如下所示：

import React from 'react';
import useAuth from './useAuth';

function MyComponent(props) {
  const [token, setToken] = useState(null);
  useAuth(token);

  // 渲染组件的其余部分
}

在上面的代码中，`MyComponent`组件使用`useState`钩子来管理令牌状态，并且使用`useAuth`钩子来检查令牌是否过期。如果令牌过期，则用户将被重定向到登录页面。