[React] 自定义hooks设计模式

文章目录

      • 1.自定义hooks设计
        • 1.1 自定义hooks
        • 1.2 设计一个自定义hooks
        • 1.3 自定义hooks的驱动条件
        • 1.4 自定义hooks的通用模式
        • 1.5 自定义hooks的条件限定

1.自定义hooks设计

react-hooks是react16.8以后,react新增的钩子API,目的是增加代码的可复用性,逻辑性,弥补无状态组件没有生命周期,没有数据管理状态state的缺陷。react-hooks思想和初衷,也是把组件,颗粒化,单元化,形成独立的渲染环境,减少渲染次数,优化性能。

1.1 自定义hooks

自定义hooks是在react-hooks基础上的一个拓展,可以根据业务需要制定满足业务需要的hooks,更注重的是逻辑单元。

通过业务场景不同,我们到底需要react-hooks做什么,怎么样把一段逻辑封装起来,做到复用,这是自定义hooks产生的初衷。

1.2 设计一个自定义hooks

在这里插入图片描述

hooks 专注的就是逻辑复用, 是我们的项目,不仅仅停留在组件复用的层面上。hooks让我们可以将一段通用的逻辑存封起来。将我们需要它的时候,开箱即用即可。

1.3 自定义hooks的驱动条件

hooks本质上是一个函数。函数的执行,决定与无状态组件组件自身的执行上下文。每次函数的执行(本质上就是组件的更新)就会执行自定义hooks的执行,由此可见组件本身执行和hooks的执行如出一辙。

那么prop的修改,useState,useReducer使用是无状态组件更新条件,那么就是驱动hooks执行的条件。 我们用一幅图来表示如上关系。

在这里插入图片描述

1.4 自定义hooks的通用模式

在这里插入图片描述

const [ xxx , ... ] = useXXX(参数A,参数B...)

编写hooks的时候, 需要注意传入和返回的值。

1.5 自定义hooks的条件限定

如果自定义hooks没有设计好,比如返回一个改变state的函数,但是没有加条件限定限定,就有可能造成不必要的上下文的执行,更有甚的是组件的循环渲染执行。

import React, {useEffect, useMemo, useState} from 'react';// const mock_data = [
//     {
//         name: '1',
//         age: 1
//     },
//     {
//         name: "2",
//         age: 2
//     }
// ]function useFormatList(list){return list.map(item=>{console.log(1111)return item.toUpperCase()})
}const list = [ 'aaa' , 'bbb' , 'ccc'  ]
function UseHooks(props) {const [num, setNum] = useState(0)const newList = useFormatList(list)return <div><div className="list" >{ newList.map(item=><div key={item} >{ item }</div>) }</div><div className="number" ><div>{ num }</div><button onClick={()=> setNum(num + 1) } >add</button></div></div>
}export default UseHooks;

格式化父组件传递过来的list数组,并将小写变成大写,但是当我们点击add。 理想状态下数组不需要重新format,但是实际跟着执行format。无疑增加了性能开销。

function useFormatList(list) {return useMemo(() => list.map(item => {console.log(1111)return item.toUpperCase()}), [])
}

所以一个好用的自定义hooks,一定要配合useMemo ,useCallback 等api一起使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/88265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序为什么必须使用SSL证书?

随着互联网技术的发展&#xff0c;越来越多的网站和应用程序开始使用SSL证书来保护用户数据的安全。微信小程序作为一款广受欢迎的应用程序&#xff0c;也必须使用SSL证书来确保用户数据的安全。 首先&#xff0c;使用SSL证书可以保护用户数据的安全。SSL证书是一种数字证书&am…

rust特性

特性&#xff0c;也叫特质&#xff0c;英文是trait。 trait是一种特殊的类型&#xff0c;用于抽象某些方法。trait类似于其他编程语言中的接口&#xff0c;但又有所不同。 trait定义了一组方法&#xff0c;其他类型可以各自实现这个trait的方法&#xff0c;从而形成多态。 一、…

玩转Mysql系列 - 第22篇:mysql索引原理详解

这是Mysql系列第22篇。 背景 使用mysql最多的就是查询&#xff0c;我们迫切的希望mysql能查询的更快一些&#xff0c;我们经常用到的查询有&#xff1a; 按照id查询唯一一条记录 按照某些个字段查询对应的记录 查找某个范围的所有记录&#xff08;between and&#xff09; …

学GoWorld,go 1.21

win11&#xff0c;下载go安装包运行&#xff0c; 环境变量GOPATHd:\go_work d:\go_work路径下执行 go install github.com/xiaonanln/goworldlatest 就自动下载了很多文件 进入D:\go_work\pkg\mod\github.com\xiaonanln\goworldv0.1.6 mod init goworld replace github.…

5+单细胞+脂质代谢+预后模型+实验

今天给同学们分享一篇5单细胞脂质代谢预后模型实验的生信文章“Single-cell transcriptome analysis reveals the metabolic changes and the prognostic value of malignant hepatocyte subpopulations and predict new therapeutic agents for hepatocellular carcinoma”&am…

uniapp ui安装 阿里图标库使用 报错 Assignment to constant variable.

安装 ui uni-app官网 (dcloud.net.cn) &#xff08;一&#xff09;安装 pages.js配置 安装 sassnpm i sass -D 或 yarn add sass -D 安装 sass-loader npm i sass-loader10.1.1 -D 或 yarn add sass-loader10.1.1 -D安装 uni-uinpm i dcloudio/uni-ui 或 yarn a…

基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(四)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 上一节说到待办系统的监听器TaskCreateListener&#xff0c;需要在flowable全局监听配置里加入配置 1、Glo…

【开发篇】八、SpringBoot整合MongoBD

文章目录 1、整合2、简单示例3、一点思考4、MongoDB的安装5、MongoDB的CRUD语法 1、整合 导入MongoBD的起步依赖&#xff1a;&#xff08;这个starter背后是MongoDB的驱动和其他依赖&#xff0c;在这儿也可以看出命名的规律&#xff0c;redis的就是spring-boot-starter-data-r…

(Mysql高级语句(进阶查询语句+数据库函数+连接查询))

Mysql高级语句&#xff08;进阶查询语句MySQL数据库函数连接查询&#xff09; 一、mysql查询语句1.1、 select ----显示表格中一个或数个字段的所有数据记录1.2、 distinct ----不显示重复的数据记录1.3、where ----有条件查询1.4、 and or ----且 或1.5 、in----显示已知的值的…

oracle 比 mysql 查询快的原因_Oracle 查询速度慢的原因总结

目录 1. oracle 比 mysql 查询快的原因_Oracle 查询速度慢的原因总结 1. oracle 比 mysql 查询快的原因_Oracle 查询速度慢的原因总结 查询速度慢的原因很多, 常见如下几种: 没有索引或者没有用到索引(这是查询慢最常见的问题, 是程序设计的缺陷)I/O 吞吐量小, 形成了瓶颈效应…

算法竞赛备赛之动态规划训练提升,DP基础掌握

1.背包问题 1.1.01背包问题 01背包问题是在M件物品中选择若干件放在空间为W的背包中&#xff0c;每件物品的体积为W1&#xff0c;W2至Wn&#xff0c;价值为P1&#xff0c;P2至Pn&#xff0c;01背包的约束条件是给定几种物品&#xff0c;每种物品有且只有一个&#xff0c;并且…

ansible的个人笔记使用记录

1.shell模块使用&#xff0c;shell模块------执行命令&#xff0c;支持特殊符 ansible all -m shell -a yum -y install nginx ansible all -m shell -a systemctl restart nginx ansible all -m shell -a systemctl stop nginx && yum -y remove nginx2. file模块…

【JS | MD5】使用crypto模块实现md5加密功能(解决中文加密前后端不一致的问题)

正常情况下使用md5加密 var crypto require(crypto);var md5Sign function (data) {var md5 crypto.createHash(md5).update(data).digest(hex);return md5; } 实际开发中经常需要前端nodejs调用后端java接口&#xff0c;使用上述方法会出现中文加密结果不同的情况&#x…

ChatGPT重磅升级:可以看图、听声音、说话啦!

美东时间9月25日&#xff0c;OpenAI在官网宣布&#xff0c;对ChatGPT进行重磅升级实现看图、听声音、输出语音内容三大功能。 早在今年3月OpenAI发布GPT-4模型时&#xff0c;就展示过看图的功能&#xff0c;但由于安全、功能不完善等原因一直没有开放。现在不仅开放了看图&…

TensorFlow入门(四、数据流向机制)

session与"图"工作过程中存在的两种数据的流向机制,即:注入机制和取回机制 注入机制(feed):即通过占位符向模式中传入数据 取回机制(fetch):指在执行计算图时&#xff0c;可以同时获取多个操作节点的计算结果 实例代码如下: import tensorflow.compat.v1 as tftf…

Redis 支持哪些数据类型?以及使用场景?

五种常用的基础数据类型&#xff1a;String&#xff0c;List&#xff0c;Set&#xff0c;ZSet&#xff0c;Hash 基于基础数据类型实现的高级数据类型&#xff1a;BitMap&#xff0c;HyperLogLog&#xff0c;GEO&#xff0c;Stream String 类型的应用场景&#xff1a;缓存对象、…

傅一平:2023年我的私人书单(上)

2023年一直在通过ChatGPT学习&#xff0c;读书少了&#xff0c;但不能不读。 这里推荐上半年读过的TOP 9 书单&#xff0c;同时附上我的一句话评语和豆瓣的评分&#xff0c;涉及思考方法、系统架构、跨学科知识、沟通技巧、生活感悟、个人修养等等。 TOP 1 佛畏系统-用系统思维…

解决apscheduler意外跳过任务【Execution of job “xx“(trigger:xxx), next run at: xxx】

解决方法 添加配置&#xff1a; max_instances&#xff1a;添加最多可同时进行的数量 misfire_grace_time&#xff1a;如果意外断开&#xff0c;多少秒以内会重新尝试运行 如&#xff1a; scheduler.add_job(print_each_5_second, interval, seconds5, max_instances10, mi…

Vue中的自定义指令详解

文章目录 自定义指令自定义指令-指令的值&#xff08;给自定义指令传参数&#xff09;自定义指令- v-loading指令封装 自定义指令 自定义指令&#xff1a;自己定义的指令&#xff0c;可以封装一些dom 操作&#xff0c;扩展额外功能&#xff08;自动聚焦&#xff0c;自动加载&a…

HTML5+CSS3小实例:脉冲波纹催眠动画特效

实例:脉冲波纹催眠动画特效 技术栈:HTML+CSS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&qu…