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
};
  1. 使用依赖项数组优化性能

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

复制代码
useEffect(() => {
  // effect logic
}, [dependency1, dependency2]); // 只有当 dependency1 或 dependency2 发生变化时,effect 才会重新执行
  1. 返回需要的所有值

从自定义 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。

相关推荐
excel2 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子31 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑34 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了35 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆41 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack