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。

相关推荐
自动花钱机1 分钟前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子15 分钟前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪17 分钟前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪22 分钟前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
qp31 分钟前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
snowfoootball1 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考
烛阴1 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript
zhu12893035562 小时前
用Rust和WebAssembly打造轻量级前端加密工具
前端·rust·wasm
@PHARAOH2 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
loriloy2 小时前
Electron崩溃问题排查指南
javascript·electron