首页 > 其他分享 >自定义Hooks:四个典型的使用场景

自定义Hooks:四个典型的使用场景

时间:2024-03-05 17:45:28浏览次数:24  
标签:场景 return 自定义 Hooks state loading 组件 const

一、如何用好hook

  要用好 React Hooks,很重要的一点,就是要能够从 Hooks 的角度去思考问题。要做到这一点其实也不难,就是在遇到一个功能开发的需求时,首先问自己一个问题:这个功能中的哪些逻辑可以抽出来成为独立的 Hooks?

  这样问的目的,是为了让我们尽可能的吧业务陆奥及拆分成独立的Hooks,这样有助于实现代码的模块化和解耦,同时也方便后面的维护。hooks的连个核心的优点:

1.是方便进行逻辑复用

2.是帮助关注分离

 如何创建自定义Hooks

自定义Hooks在形式上其实非常简单,就是声明一个名字以use开头的函数,比如useCounter。这个函数在形式上和普通函数没有区别,你可以传递任意参数给这个Hooks。但是要注意,Hooks和普通函数在语义化上是由区别的,就在于函数没有用到其他Hooks。什么意思呢?就是说如果你创建了一个 useXXX 的函数,但是内部并没有用任何其它 Hooks,那么这个函数就不是一个 Hook,而只是一个普通的函数。但是如果用了其它 Hooks ,那么它就是一个 Hook。

  举一个简单的例子,一个简单计数器的实现,当时把业务逻辑都写在了函数组件内部,但其实是可以把业务逻辑提取出来成为一个 Hook。比如下面的代码:

import { useState, useCallback }from 'react';

function useCounter() {
// 定义 count 这个 state 用于保存当前数值
const [count, setCount] = useState(0);
// 实现加 1 的操作
const increment = useCallback(() => setCount(count + 1), [count]);
// 实现减 1 的操作
const decrement = useCallback(() => setCount(count - 1), [count]);
// 重置计数器
const reset = useCallback(() => setCount(0), []);

// 将业务逻辑的操作 export 出去供调用者使用
return { count, increment, decrement, reset };
}

有了这个 Hook,我们就可以在组件中使用它,比如下面的代码:

import React from 'react';

function Counter() {
// 调用自定义 Hook
const { count, increment, decrement, reset } = useCounter();

// 渲染 UI
return (
<div>
<button onClick={decrement}> - </button>
<p>{count}</p>
<button onClick={increment}> + </button>
<button onClick={reset}> reset </button>
</div>
);
}

在这段代码中,我们把原来在函数组件中实现的逻辑提取了出来,成为一个单独的 Hook,一方面能让这个逻辑得到重用,另外一方面也能让代码更加语义化,并且易于理解和维护。

从这个例子,我们可以看出自定义Hooks的两个特点:

1.名字一定是以use开头的函数,这样react才能知道这个函数是一个Hooks;

2.函数内部一定调用了其他的Hooks,可以是内置的Hooks,也可以是自定义Hooks。这样才能够让组件刷新,或者去产生副作用。

  封装通用逻辑:useAsync

在组件的开发过程中,有一些常用的通用逻辑。过去可能应为逻辑重用比较繁琐,而经常在每个组件中去自己实现,造成维护的困难。但现有了Hooks,就可以将更多的通用逻辑通过Hooks的形式进行封装,方便被不同的组件重用。

比如说,在日常UI的开发中,有一个最常b见的需求:发起异步请求获取数据并显示在界面上。在这个过程中,我们不仅要关心请求正常返回时UI如何战术数据;还需要处理请求出错,以及惯出loding状态在UI上如何显示。

  我们可以重新看下在第 1 讲中看到的异步请求的例子,从 Server 端获取用户列表,并显示在界面上:

import React from "react";

export default function UserList() {
// 使用三个 state 分别保存用户列表,loading 状态和错误状态
const [users, setUsers] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);

// 定义获取用户的回调函数
const fetchUsers = async () => {
setLoading(true);
try {
const res = await fetch("https://reqres.in/api/users/");
const json = await res.json();
// 请求成功后将用户数据放入 state
setUsers(json.data);
} catch (err) {
// 请求失败将错误状态放入 state
setError(err);
}
setLoading(false);
};

return (
<div className="user-list">
<button onClick={fetchUsers} disabled={loading}>
{loading ? "Loading..." : "Show Users"}
</button>
{error &&
<div style={{ color: "red" }}>Failed: {String(error)}</div>
}
<br />
<ul>
{users && users.length > 0 &&
users.map((user) => {
return <li key={user.id}>{user.first_name}</li>;
})}
</ul>
</div>
);
}

在这里,我们定义了users、loading和error三个状态。如果我们在异步请求的不同阶段去设置不同的转台,这样Ui最终能够根据这些状态展示出来,在每个需要异步请求的组件中,其实都需要重复的逻辑。

事实上,在处理这类请求的时候,模式都是类似的,通常都会遵循下面步骤:

1.创建data,loding,error这3个state;

2.请求发出后,设置loading state为true;

3.请求成功后,将返回的数据放到某个state中,并将loading state设置false;

4.请求失败后,设置error state为true,并将loading state设为false。

最后,基于data、loading、error这3个state的数据,ui就可以正确的显示数据,或者loading、error这些反馈给客户了。

所以,通过创建一个自定义Hook,可以很好的将这样的逻辑提取出来,成为一个可重用的模块。比如代码可以这样实现:

import React from "react";

export default function UserList() {
// 使用三个 state 分别保存用户列表,loading 状态和错误状态
const [users, setUsers] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);

// 定义获取用户的回调函数
const fetchUsers = async () => {
setLoading(true);
try {
const res = await fetch("https://reqres.in/api/users/");
const json = await res.json();
// 请求成功后将用户数据放入 state
setUsers(json.data);
} catch (err) {
// 请求失败将错误状态放入 state
setError(err);
}
setLoading(false);
};

return (
<div className="user-list">
<button onClick={fetchUsers} disabled={loading}>
{loading ? "Loading..." : "Show Users"}
</button>
{error &&
<div style={{ color: "red" }}>Failed: {String(error)}</div>
}
<br />
<ul>
{users && users.length > 0 &&
users.map((user) => {
return <li key={user.id}>{user.first_name}</li>;
})}
</ul>
</div>
);
}

那么有了这个 Hook,我们在组件中就只需要关心与业务逻辑相关的部分。比如代码可以简化成这样的形式:

import React from "react";
import useAsync from './useAsync';

export default function UserList() {
// 通过 useAsync 这个函数,只需要提供异步逻辑的实现
const {
execute: fetchUsers,
data: users,
loading,
error,
} = useAsync(async () => {
const res = await fetch("https://reqres.in/api/users/");
const json = await res.json();
return json.data;
});

return (
// 根据状态渲染 UI...
);
}

不过这里可能有一个疑问:这种类型的封装我写一个工具类不就可以了?为啥一定要通过Hooks进行封装呢?

答案很容易就能想到。应为在Hooks中,你可以管理当前组件的state,从而将更多的逻辑写在可重用的Hooks中。但是要知道,在普通的工具类中时无法直接修改组件的state的,那么也就无法在数据改变的时候触发组件的重新渲染。

  监听浏览器状态:useScroll

虽然React组件基本上不需要关心太多的浏览器API,但是有时候却是必须的:

1.界面需要根据窗口重新布局;

2.在页面滚动时,需要根据滚动位置来决定是否显示一个”返回顶部“的按钮。

这都需要用到浏览器的api来监听这些状态的变化。那么我们就可以滚动条位置的场景为例,来看看因该如何用Hooks优雅的监听浏览器状态。

正如Hooks的字面意思时”钩子“,他带来的好处就是可以让React的组件绑定在任何可能的数据源上。这样当数据源发生变化时,组件能够自动刷新。把这个好处对应到滚动条这个场景就是:组件需要绑定到滚动条的位置数据上。

虽然这个逻辑在函数组件中能直接实现,但是把这个逻辑实现为一个独立的Hooks,既可以达到逻辑重用,在语义化也更加清晰。这和上面的useAsync的作用非常类似的。

我们可以直接来看这个Hooks因该如何实现:

import { useState, useEffect } from 'react';

// 获取横向,纵向滚动条位置
const getPosition = () => {
return {
x: document.body.scrollLeft,
y: document.body.scrollTop,
};
};
const useScroll = () => {
// 定一个 position 这个 state 保存滚动条位置
const [position, setPosition] = useState(getPosition());
useEffect(() => {
const handler = () => {
setPosition(getPosition(document));
};
// 监听 scroll 事件,更新滚动条位置
document.addEventListener("scroll", handler);
return () => {
// 组件销毁时,取消事件监听
document.removeEventListener("scroll", handler);
};
}, []);
return position;
};

有了这个 Hook,你就可以非常方便地监听当前浏览器窗口的滚动条位置了。比如下面的代码就展示了“返回顶部”这样一个功能的实现:

import React, { useCallback } from 'react';
import useScroll from './useScroll';

function ScrollTop() {
const { y } = useScroll();

const goTop = useCallback(() => {
document.body.scrollTop = 0;
}, []);

const style = {
position: "fixed",
right: "10px",
bottom: "10px",
};
// 当滚动条位置纵向超过 300 时,显示返回顶部按钮
if (y > 300) {
return (
<button onClick={goTop} style={style}>
Back to Top
</button>
);
}
// 否则不 render 任何 UI
return null;
}

 通过这个例子,我们看到了如何将浏览器状态变成可被 React 组件绑定的数据源,从而在使用上更加便捷和直观。当然,除了窗口大小、滚动条位置这些状态,还有其它一些数据也可以这样操作,比如 cookies,localStorage, URL,等等。你都可以通过这样的方法来实现。

  拆分复杂组件

怎样能使函数组件不会太冗余呢?做法很简单,就是尽量将相关的逻辑做成独立的Hooks,然后再函数组件中使用这些Hooks,通过参数传递和返回值让Hooks之间完成交互

为了让你对这一点有更直观的感受,我们来看一个例子。设想现在有这样一个需求:我们需要展示一个博客文章的列表,并且有一列要显示文章的分类。同时,我们还需要提供表格过滤功能,以便能够只显示某个分类的文章。为了支持过滤功能,后端提供了两个 API:一个用于获取文章的列表,另一个用于获取所有的分类。这就需要我们在前端将文章列表返回的数据分类 ID 映射到分类的名字,以便显示在列表里。

  还是老生常谈的那句话,改变这个状况的关键仍然在于开发思路的转变。我们要真正把 Hooks 就看成普通的函数,能隔离的尽量去做隔离,从而让代码更加模块化,更易于理解和维护。那么针对这样一个功能,我们甚至可以将其拆分成 4 个 Hooks,每一个 Hook 都尽量小,代码如下:

import React, { useEffect, useCallback, useMemo, useState } from "react";
import { Select, Table } from "antd";
import _ from "lodash";
import useAsync from "./useAsync";

const endpoint = "https://myserver.com/api/";
const useArticles = () => {
// 使用上面创建的 useAsync 获取文章列表
const { execute, data, loading, error } = useAsync(
useCallback(async () => {
const res = await fetch(${endpoint}/<span style="color: rgba(0, 0, 0, 1)">posts);
return await res.json();
}, []),
);
// 执行异步调用
useEffect(() => execute(), [execute]);
// 返回语义化的数据结构
return {
articles: data,
articlesLoading: loading,
articlesError: error,
};
};
const useCategories = () => {
// 使用上面创建的 useAsync 获取分类列表
const { execute, data, loading, error } = useAsync(
useCallback(async () => {
const res = await fetch(${endpoint}/<span style="color: rgba(0, 0, 0, 1)">categories);
return await res.json();
}, []),
);
// 执行异步调用
useEffect(() => execute(), [execute]);

// 返回语义化的数据结构
return {
categories: data,
categoriesLoading: loading,
categoriesError: error,
};
};
const useCombinedArticles = (articles, categories) => {
// 将文章数据和分类数据组合到一起
return useMemo(() => {
// 如果没有文章或者分类数据则返回 null
if (!articles || !categories) return null;
return articles.map((article) => {
return {
...article,
category: categories.find(
(c) => String(c.id) === String(article.categoryId),
),
};
});
}, [articles, categories]);
};
const useFilteredArticles = (articles, selectedCategory) => {
// 实现按照分类过滤
return useMemo(() => {
if (!articles) return null;
if (!selectedCategory) return articles;
return articles.filter((article) => {
console.log("filter: ", article.categoryId, selectedCategory);
return String(article?.category?.name) === String(selectedCategory);
});
}, [articles, selectedCategory]);
};

const columns = [
{ dataIndex: "title", title: "Title" },
{ dataIndex: ["category", "name"], title: "Category" },
];

export default function BlogList() {
const [selectedCategory, setSelectedCategory] = useState(null);
// 获取文章列表
const { articles, articlesError } = useArticles();
// 获取分类列表
const { categories, categoriesError } = useCategories();
// 组合数据
const combined = useCombinedArticles(articles, categories);
// 实现过滤
const result = useFilteredArticles(combined, selectedCategory);

// 分类下拉框选项用于过滤
const options = useMemo(() => {
const arr = _.uniqBy(categories, (c) => c.name).map((c) => ({
value: c.name,
label: c.name,
}));
arr.unshift({ value: null, label: "All" });
return arr;
}, [categories]);

// 如果出错,简单返回 Failed
if (articlesError || categoriesError) return "Failed";

// 如果没有结果,说明正在加载
if (!result) return "Loading...";

return (
<div>
<Select
value={selectedCategory}
onChange={(value) => setSelectedCategory(value)}
options={options}
style={{ width: "200px" }}
placeholder="Select a category"
/>
<Table dataSource={result} columns={columns} />
</div>
);
}

通过这样的方式,我们就把一个较为复杂的逻辑拆分成一个个独立的 Hook 了,不仅隔离了业务逻辑,也让代码在语义上更加明确。比如说有 useArticles、useCategories 这样与业务相关的名字,就非常易于理解。虽然这个例子中抽取出来的 Hooks 都非常简单,甚至看上去没有必要。但是实际的开发场景一定是比这个复杂的,比如对于 API 返回的数据需要做一些数据的转换,进行数据的缓存,等等。那么这时就要避免把这些逻辑都放到一起,而是就要拆分到独立的 Hooks,以免产生过于复杂的组件。到时候你也就更能更体会到 Hooks 带给你的惊喜了。

  小结:

好了,这篇文章要给你介绍了自定义 Hooks 的概念,以及典型的四个使用场景:

  1.抽离业务逻辑层;

  2.封装通用逻辑

  3.监听浏览器状态

  4.拆分复杂组件。

其中,我通过四个案例来帮助你真正理解 Hooks ,并熟练掌握自定义 Hooks 的用法。应始终记得,要用 Hooks 的思路去解决问题,发挥 Hooks 的最大价值,就是要经常去思考哪些逻辑应该封装到一个独立的 Hook,保证每个 Hook 的短小精悍,从而让代码更加清晰,易于理解和维护。

标签:场景,return,自定义,Hooks,state,loading,组件,const
From: https://www.cnblogs.com/mounterLove/p/18054540

相关文章

  • React的7个常用Hooks及使用场景(含示例)
    React是一款非常流行的JavaScript库,它提供了许多Hooks,用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例:No1、useStateuseState用于在函数组件中管理状态。它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值......
  • Vue学习笔记32--自定义指令--对象式
    Vue学习笔记32--自定义指令--对象式总结:1.autofocus属性,用于input自动获取焦点2.directives指令中this是指window3.vm中使用directives进行自定义指令,为局部指令4.全局指令和全局过滤器类似,应在vm之外使用directive进行声明使用自定义指令总结: 定......
  • asp.net core 中基于策略的授权-自定义授权
    前两篇文章扫盲篇,进阶篇中介绍了基本的asp.netcore中基于策略的授权的使用方法。使用策略授权时,只能指定策略,不能配置其他信息。[Authorize(Policy="AtLeast21")]//指定要验证的策略publicclassAlcoholPurchaseController:Controller{publicIA......
  • uni-app自定义图标
    1.首先去阿里巴巴矢量图标库找到自己需要的图标,比如2.鼠标移到图标上,有个购物车的小图标(添加入库),然后点击右上角的购物车小图标,弹出弹框,选择添加至项目3.去资源管理里面找到我的项目,就可以看到刚才咱们自己添加的图标4.可以在项目设置中设置自己需要的配置5.点击下载至......
  • Redis在游戏开发中的几种应用场景
    Redis特点1.内存数据库Redis数据主要存储在内存,综合性能标准100k+QPS。需要说明下,十万QPS只是个综合参考,实际性能跟CPU性能、操作的命令复杂度有较大关系,对于简单的set/get操作50万QPS也没问题。2.丰富的数据结构所有Redis的数据都是以key-value键值对的形式存在......
  • three.js导出场景内模型为glb,gltf
    使用three,导出当前场景内指定模型为glb,或者gltf格式import{GLTFExporter}from'three/examples/jsm/exporters/GLTFExporter.js'//导出模型为GLTFpublicexportGLTFModel(){letcurrSelectObj:THREE.Object3D=SMART.scene.children[2];//需要导......
  • 百度地图API自定义地图
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content......
  • 09. 保存地图场景
    本节目的将Map上的房间和连线都保存下来,以便从战斗场景回来的时候能够恢复这些数据实现方法定义存储结构定义一个名叫MapLayoutSO的ScriptableObject,它里面记录了所有的房间和连线信息,如下图所示房间的信息中不单单有房间的图标、房间的类型、引用的场景,还有房间的状态、......
  • 08. 场景加载
    awaitable关键字本节涉及到场景的加载和卸载,在勇士传说中,我们使用协程的方式来加载和卸载场景,在本节使用了unity2023.3最新的特性awaitableawaitable具体是啥,我也不太清楚,见下图加载场景在上一节中,我们监听了LoadRoomEvent事件,成功调用了SceneLoadManager.OnLoadRoom......
  • 异常(异常是python对象) 和 自定义异常类
    Python提供了异常和断言来处理程序在运行过程中出现的异常和错误什么是异常?分清楚程序发生异常和程序执行错误,它们完全是两码事,程序由于错误导致的运行异常,是需要程序员想办法解决的;但还有一些异常,是程序正常运行的结果,比如用raise手动引发的异常。异常是在程序执行过程中......