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。

相关推荐
musk12127 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘36 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref