React 自定义hooks最佳实践

最新推荐文章于 2024-05-23 18:02:24 发布
最新推荐文章于 2024-05-23 18:02:24 发布
阅读量3.8k 收藏 12
点赞数 5
分类专栏： react 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq799028706/article/details/126851871
版权

1. 背景

react hooks推出已经有一段时间了，而自定义hooks在hooks中其实是非常关键的一环，它是抽离业务逻辑和UI逻辑，复用代码的关键，因此在使用上相对于其他hooks不易掌握，你可能在开发中经常会遇到以下问题

  1. 我该什么时候使用自定义hooks？
  2. 使用自定hooks时应该传入什么参数，又返回出什么值？
  3. 为什么使用自定义hooks，我的代码逻辑好像没有变简洁？
  4. …

为了解决以上疑问，下面我会结合业务的实际场景，通过几个案例，来跟大家分享自定义hooks中的一些实践与经验
注：本文默认读者具备一定的react基础

2. 案例一：Tabs组件

需求一：有一个Tab选项和内容区，tab的切换，会改变tabId，需要重新拉取接口数据，用以展示不同的内容

class实现

我们使用class组件实现一下，来借以发现class组件中存在的一些问题
在这里插入图片描述

我将这个功能抽成了三个组件

  • Tab：负责切换Tab
  • ContentContainer: 负责处理数据逻辑
  • Content：负责渲染
    为什么要这么拆分的原因：将包含业务逻辑的容器组件和UI展示部分的展示组件剥离开，利于代码的复用，详细可参考：medium

原有的class组件模式，通常是将组件拆分为UI组件和容器组件，容器组件部分处理数据逻辑，套在需要使用到该逻辑的组件上，从而达到复用代码逻辑的目的。

因此在处理Content的时候，我将其拆成了两个组件

  • 只负责渲染的Content组件
  • 只负责逻辑处理的ContentCantainer组件
    为了复用，我们只能通过props的形式，做一层嵌套，像React中的高阶组件就是通过这种模式来实现代码逻辑的复用。
    但这种模式存在一定缺陷，组件非常复杂的时候，如果每次都通过嵌套拆分的模式来复用代码，会形成很深的组件层级和嵌套逻辑，这会给开发带来不少麻烦。而hooks的出现就解决了这个问题

hooks改造

针对之前遇到的问题，我们使用hooks进行改造
在这里插入图片描述

在class组件中，为了复用状态，我们将Content拆成了两个组件，并形成了嵌套。
而在hooks中，我们只使用了一个组件和一个自定义hooks

  • useContent：自定义hooks，负责处理逻辑，将状态返回给外界组件
  • Content：UI组件，负责渲染
    与class不同的是，这两者并没有形成嵌套关系，而是扁平化，自定义的useContent，负责将组件逻辑抽了出来，只暴露给Content所需的状态

案例二：Table组件

需求二：实现一个表格组件，需要分页功能，切换不同页面时，加载不同的数据
在这里插入图片描述

常规实现

这个需求，在后台十分常见，比较常见的写法如下：
在这里插入图片描述

在组件中我们不仅维护了Table组件的UI状态，也同时维护了Table组件的业务逻辑，定义了多个状态
loading, dataSource , current, total
几乎每个表格组件都会包含上述的业务逻辑，此时我们就可以将业务逻辑使用Hooks的方式剥离出来，来实现复用的目的。

hooks改造

在编写 useTableHooks 的时候，我们需要注意两个地方

  1. 需要将请求接口的函数作为参数传入hooks中，且该函数需要约定固定的入参和返回值
  2. 原因1：因为每个Table组件的网络请求都不一样，所以它是属于Table组件本身的逻辑，并不是useTableHooks 的逻辑，因此请求接口的函数需要在Table组件中定义
  3. 原因2：约定固定参数和返回值是为了统一在hooks中处理数据
  4. 监听表格切换的change函数，需要作为useTableHooks的返回值暴露出来，而不是在Table组件中监听change

平时在写业务逻辑的时候，我们较少的会使用这种写法（将函数作为参数传入，将函数作为返回值传出），因此对于这两个地方需要额外的注意。

Table组件代码如下：
在这里插入图片描述

useTableHooks组件代码如下：
在这里插入图片描述

可以看到通过自定义hooks的改造，成功的将UI逻辑和业务逻辑给分离开来，在其他地方再次使用到表格组件时，就可以直接使用 useTableHooks 去处理分页逻辑。
整个组件变得就更加简洁可复用了。

思考：业务要求table组件需要添加查询表单，那么自定义hooks应该如何扩展呢？
在这里插入图片描述

总结

通过上面两个案例，我们可以回答最开始的几个问题了

  1. 我该什么时候使用自定义hooks？
    • 发现某处业务逻辑重复使用时，可将业务逻辑抽离开
    • 组件比较复杂时，可通过自定义hooks拆分组件逻辑，简化代码
  2. 使用自定hooks时应该传入什么参数，又返回出什么值？
    • 传参和返回值是比较灵活的，需要注意的是，不仅能传常规的数据类型，还能传递函数对象
  3. 为什么时候自定义hooks，我的代码好像没有变简洁？
    • 要理解UI组件和容器组件这两个概念，恰当的抽离业务逻辑部分，保留组件的UI部分，组件复杂时拆分可能也有一定的难度，过度设计会导致组件更难维护，因此要把控好度
zzzmj_
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react之自定义hooks
study_way的博客
07-01 3896
要自定义一个类似于的自定义 Hook，你可以借助 React 的useEffect和useRefHooks 来实现。effect();} else {// 使用示例return (在上述示例中，我们创建了一个名为的自定义 Hook。effect和。在内部，我们使用了useRef来创建一个标记是否已经完成初始渲染的变量isMounted。在useEffect中，我们检查isMounted的值。如果isMounted的值为true。
react 自定义hook
一枚不断学习的小码农一枚~
04-01 5791
什么是自定义hook Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。 首先也要遵循hooks的规则 只在最顶层使用hooks，不要在循环、条件或者嵌套中调用hook，这样就能确保hook在每一次渲染中都按同样的顺序调用。多次调用hooks可以保证hook状态的正确。 只在react函数（react函数组件、自定义hook组件）中调用hook，不要在普通的ja
React 如何自定义 Hooks
最新发布
hawk2014bj的博客
05-23 431
React 内部自带了很多 Hooks 例如 useState、useEffect 等等，那么我们为什么还要自定义 Hooks？使用 Hooks 的好处之一就是重用，可以将代码从组件中抽离出来定义为 Hooks，而不用每个组件中重复去写相同的代码。首先是维护方便，更重要的是封装，Hooks 将业务逻辑进行了封装，只要返回值不变，任何改动对组件都是透明的。
自定义React-Hooks
麦子
12-07 1237
一、React Hooks 1、Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 二、Hooks 优点 1、可以抽离公共方法和逻辑，提高代码的可复用性 2、函数式组件更简洁，开发效率更高 三、自定义 Hook 1、通过自定义 Hook，可以将组件逻辑提取到可重用的函数中 2、自定义 Hook 是一个函数，其名称以use开头，函数内部可以调用其他的Hook 3、初始化项目 create-reac...
React中useContext(全局公共状态)的使用
m0_58447769的博客
11-12 1881
关于使用useContext的固定套路有以下几个步骤: (一) 导入并调用createContext,得到Context对象并导出. import { useContext } from 'react' export const Context = React.createContext() // 这里有导出 (二) 使用Provider组件包裹根组件,并通过value属性提供要共享的数据. return ( <Context.Provider valu
React 自定义Hooks
热水钟博客
05-11 1195
一、自定义hooks的意义： （1）将多个组件都要用到的逻辑相同的功能片段，单独封成一个单函函数来使用，这个函数必须以use命名开头，这样react才认识它是自定义hooks函数，还是组件？ （2）自定义函数定位偏向实现功能，而组件偏向于界面和业务逻辑。 （3） React内置的hooks函数解决了函数组件无法使用state，以及传统写法中生命周期函数混乱和this指向的问题，但没有解决组件复用性的提升。 （4） 组件复用的提升是由自定义hooks来体...
React-Hooks-Ts:React + Hooks + Ts最佳实践
03-25
"React-Hooks-Ts: React + Hooks + Ts最佳实践"是一个深入探讨如何在React项目中有效利用Hooks和TypeScript的主题。这里我们将详细讲解React Hooks与TypeScript在实际应用中的关键知识点。 1. **React Hooks**： -...
awesome-react-hooks：关于React Hooks的精选列表
01-31
4. **最佳实践与文章**： - 文章和教程，解释如何有效地使用和理解Hooks，以及避免常见陷阱。 - 例如，深入理解useEffect，或者如何避免Hook的副作用问题。 5. **工具与库**： - 提供与Hooks相关的开发工具，如...
自定义钩子最佳实践
02-08
本文将深入探讨自定义钩子的最佳实践，以及如何利用TypeScript提升代码的类型安全性。 首先，让我们理解自定义钩子的基本概念。自定义钩子以`use`开头，遵循一定的规则，如只能在函数组件或另一个自定义钩子内部...
react-hooks:React钩
04-28
三、最佳实践与注意事项 1. 避免在条件语句中使用Hooks，因为这可能会导致组件渲染时Hooks的顺序不一致。 2. 使用useCallback优化依赖于state或props的回调函数，避免不必要的重新渲染。 3. 使用useMemo优化计算值...
react_hooks_todo
04-05
React Hooks 是 React 16.8 版本引入的一个重大特性，它允许我们在不编写类组件的情况下使用状态和生命周期方法。在这个名为 "react_hooks_...通过研究这个项目，开发者可以深入掌握React Hooks的使用技巧和最佳实践。
custom-react-hooks:自定义钩子进行React
03-15
钩子 setGlobals 此功能允许您设置useDataApi的全局选项 用法 setGlobals ( { baseURL : 'http://your-base-url' , headers : { } , withCredentials : true , } ) useDataApi初始选项 财产 描述 类型 默认 baseURL 它将基本URL设置为与useDataApi选项的URL连接 string '' 标头 请求标头 any null withCredentials 启用Cookie凭证 boolean false useDataApi 该钩子用于在组件安装时使用API 用法 import React , { useEffect } from 'react' ; import { useDataApi } from 'custom-
前端学习（3300）：三种usecontent的
歌谣的博客
09-06 818
react中的自定义Hooks
qq_44718039的博客
06-03 176
react自定义hooks
useContext详细说明与使用
热门推荐
WwLK123的博客
06-25 1万+
useContext的详细使用介绍。
React 项目中常用自定义hooks
qq_27314517的博客
02-14 507
react 项目中常用的自定义hook
自定义hooks
lin_fightin的博客
03-05 3422
自定义Hooks，实际上就是把每个组件重复的逻辑单独抽离出来，然后封装成函数，只不过用use开头就好，不然用不了一些hooks 1 共享context 我们一般通过useContext共享数据的时候，如果每个组件都要写就造成代码冗余了，可以这样试试 有多个context的时候，将每个context传入，然后编辑成数组导出即可。 2获取窗口滚动位置 这个需要监听scroll事件，并且在useEffect return的时候要取消监听，每个组件都写的话代码会冗余，可以这样 这样在我们的代码中就直接 cons
如何写自定义 React Hook？
fe_watermelon的博客
03-19 1431
大家好，我是努力学习 React 的前端西瓜哥。 我们在写 React 函数组件时，如果想要复用组件的部分逻辑，可以考虑写自定义 Hook。本文会教大家如何写自定义 React Hook。 Hook 的规则 在此之前，我们先了解一下 Hook 的使用规则。 首先 Hook 只能在函数组件的顶层使用，不能在循环、条件、嵌套函数中执行。 这和 React Hook 的实现原理有关。当第一次执行函数组件时，React 会分配一个对象，然后一个个调用 Hook 时，将得到的结果依次放入到有序的表中，然后保存在该对象
react 自定义hooks
09-14
React自定义Hooks是一种自定义的React Hook函数，用于在无需编写类组件的情况下，复用和共享状态逻辑。通过使用自定义Hooks，我们可以将组件中的逻辑提取出来，以便在多个组件之间共享和重用。引用中提到的Hook是React 16.8新增的特性，它可以让我们在函数组件中使用状态和其他React特性，而无需编写类组件。而引用中的useUpdateEffect是一个自定义的React Hook，它类似于React的useEffect，但是只在组件更新时执行副作用操作，忽略了组件的初始渲染阶段。 使用React自定义Hooks的步骤如下： 1. 创建自定义Hook函数，函数名以"use"开头，例如"useCustomHook"。 2. 在自定义Hook函数中，可以使用其他React Hooks和自定义逻辑来实现所需的功能。 3. 在组件中通过调用自定义Hook函数来使用该Hook，以获取状态和执行副作用操作。 下面是一个示例，展示如何创建和使用一个自定义Hook来管理计数器的状态： ```javascript // 自定义Hook import { useState } from 'react'; function useCounter(initialValue) { const [count, setCount = useState(initialValue); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return { count, increment, decrement }; } // 使用自定义Hook的组件 import React from 'react'; import useCounter from './useCounter'; function Counter() { // 使用useCounter自定义Hook，获取计数器的状态和操作函数 const { count, increment, decrement } = useCounter(0); return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } ``` 在上述示例中，我们创建了一个名为useCounter的自定义Hook函数，它使用useState来管理计数器的状态，并提供了increment和decrement函数来增加和减少计数器的值。然后，我们在Counter组件中使用useCounter来获取计数器的状态和操作函数，并展示计数器的值以及按钮来增加和减少计数器的值。 通过使用React自定义Hooks，我们可以轻松地复用和共享状态逻辑，使代码更加可维护和可扩展。通过创建自定义Hooks，我们可以将组件的逻辑分离出来，提高代码的重用性和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值