React 如何自定义 Hooks

自定义 Hooks

React 内部自带了很多 Hooks 例如 useState、useEffect 等等，那么我们为什么还要自定义 Hooks？使用 Hooks 的好处之一就是重用，可以将代码从组件中抽离出来定义为 Hooks，而不用每个组件中重复去写相同的代码。首先是维护方便，更重要的是封装，Hooks 将业务逻辑进行了封装，只要返回值不变，任何改动对组件都是透明的。

Hooks的设计中，将状态保存在Filber节点上，组件是无状态的，在我们的自定义 Hooks 中通过 useState 访问数据，通过 useEfftect 做副作用逻辑处理。例如，实现一个获取在线人数的 Hooks：

import { useState, useEffect } from 'react';

const useOnlineUsers = (apiUrl) => {
  const [onlineUsers, setOnlineUsers] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchOnlineUsers = async () => {
      try {
        setLoading(true);
        const response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        const data = await response.json();
        setOnlineUsers(data.totalOnlineUsers);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchOnlineUsers();

    // 可选：设置轮询来定期更新在线用户数量
    const intervalId = setInterval(fetchOnlineUsers, 10000); // 例如，每10秒更新一次

    // 清理函数来清除 interval
    return () => clearInterval(intervalId);
  }, [apiUrl]);

  return { onlineUsers, loading, error };
};

export default useOnlineUsers;

Hooks中通过 useEffect 从后台获取用户数，在需要显示的组件中进行引用：

import React from 'react';
import useOnlineUsers from './useOnlineUsers'; // 根据你的项目结构调整路径

const OnlineUsersComponent = () => {
  const apiUrl = 'https://api.example.com/online-users'; // 替换为你的实际 API URL
  const { onlineUsers, loading, error } = useOnlineUsers(apiUrl);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>错误: {error}</div>;
  }

  return (
    <div>
      <h1>在线用户数: {onlineUsers}</h1>
    </div>
  );
};

export default OnlineUsersComponent;

自定义 Hooks 的注意事项

1. 命名规范

自定义 hooks 的名称应该以 “use” 开头，这不仅是为了遵循 React 的惯例，还能使其在代码中一目了然地被识别为 hooks。

const useOnlineUsers = () => {
  // hook implementation
};

2. 使用依赖项数组优化性能

在 useEffect 或其他 hooks 中使用依赖项数组来避免不必要的重复执行。

useEffect(() => {
  // effect logic
}, [dependency1, dependency2]); // 只有当 dependency1 或 dependency2 发生变化时，effect 才会重新执行

3. 返回需要的所有值

从自定义 hook 返回所有需要的状态和函数，而不仅仅是一个值。这可以让使用 hook 的组件更灵活，就像 useState 一样。

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
};

// 在组件中使用
const CounterComponent = () => {
  const { count, increment, decrement } = useCounter(10);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

总结

Hooks 提供了非常优雅的设计方式，通过自定义 Hooks 来提升代码的复用与封装，在日常开发中，也不要过度的使用自定义 Hooks，对于一些简单不需要封装的业务逻辑，则无需定义为 Hooks。