react自用小技巧(持续更新中)

react自用小技巧(持续更新中)

作者:devwolf

导言:

笔者应届时,投vue2就任一家大食品厂的资讯部后转成了react,写了一年出头的react类组件。然后跳槽到苏州科技城的一个原做影视渲染的公司开始全面转hooks,又写了两年多。再后来去一家智仓写irms羲和调度,react类组件和hooks混用干了5个月。某些在笔者v2ex上公开过的原因,笔者又跳回了互联网赛道,观摩着如今vue岗在国内趋于主流,打算“弃暗投明”转vue岗(也看到了vue3那些很多针对react痛点的新语法糖)。可惜,笔者的事业运一如既往的差,如今在一家给政府做房地产相关的公司里用vue2维护老项目纯体力活。

不想完全落下react的相关手艺,下一跳还选react,现在重新拾起来看看官网和自己随便搓搓东西。

目前这篇连载用于记录笔者react开发期间遇到的一些封装技巧/野路子。

同步记录于笔者的github devwolf

1.封装一个自带了ui组件的类自定义hooks

用react官网的例子改造一下,比较像自定义hooks,但是不完全是。闭包中提供了一个ui组件以及这个ui组件的修改方法,以此来进行外部的额外干预

import { useState } from 'react';export default function MyApp() {const {MyButtonUI:MyButtonUI1,handleClick:handleClick1}  = MyButton()const {MyButtonUI:MyButtonUI2,handleClick:handleClick2}  = MyButton()return (<div><h1>Counters that update separately</h1><button onClick={()=>{handleClick1()handleClick2()}}>all</button><MyButtonUI1 /><MyButtonUI2 /></div>);
}function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}const MyButtonUI=()=>{return <button onClick={handleClick}>Clicked {count} times</button>}return {MyButtonUI,handleClick};
}

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

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

相关文章

文件批量改后缀名,轻松实现TXT到DOCX格式转换,高效管理您的文件库!

文件处理与管理已成为我们日常生活和工作中不可或缺的一环。然而&#xff0c;面对海量的文件&#xff0c;如何高效地进行格式转换和管理&#xff0c;却成为了一道难题。今天&#xff0c;我们将为您揭晓一个神奇的解决方案——文件批量改后缀名功能&#xff0c;让您轻松实现TXT到…

【GPT-4o:开创人工智能新纪元】

GPT-4o&#xff1a;开创人工智能新纪元 最近&#xff0c;GPT-4o问世&#xff0c;再次引发了人们对人工智能技术的关注和讨论。这一新型语言模型的出现&#xff0c;不仅在技术上实现了飞跃&#xff0c;也为我们带来了全新的思考和体验。接下来&#xff0c;我们将对GPT-4o进行全…

【docker】docker的安装

如果之前安装了旧版本的docker我们需要进行卸载&#xff1a; 卸载之前的旧版本 卸载 # 卸载旧版本 sudo apt-get remove docker docker-engine docker.io containerd runc # 卸载历史版本 apt-get purge docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker…

linux文件共享之samba

1.介绍 Samba是一个开源文件共享服务&#xff0c;可以使linux与windows之间进行文件共享&#xff0c;可以根据不同人员调整共享设置以及权限管理。 2.安装 一个命令就OK了&#xff1a;yum install -y samba [rootansible01 ~]# yum install -y samba 已加载插件&#xff1a;l…

Python爬虫之简单学习BeautifulSoup库,学习获取的对象常用方法,实战豆瓣Top250

BeautifulSoup是一个非常流行的Python库&#xff0c;广泛应用于网络爬虫开发中&#xff0c;用于解析HTML和XML文档&#xff0c;以便于从中提取所需数据。它是进行网页内容抓取和数据挖掘的强大工具。 功能特性 易于使用: 提供简洁的API&#xff0c;使得即使是对网页结构不熟悉…

【一刷《剑指Offer》】面试题 31:连续子数组的最大和

牛客对应题目链接&#xff1a;连续子数组最大和_牛客题霸_牛客网 (nowcoder.com) 力扣对应题目链接&#xff1a;53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 核心考点 &#xff1a;简单动归问题。 一、《剑指Offer》对应内容 二、分析题目 1、贪心 从前往后迭…

backbone主干网络的选取

backbone_name 通常用于指定深度学习模型的主干网络&#xff08;backbone network&#xff09;。主干网络是指在整个模型中承担主要特征提取任务的部分。不同的主干网络有不同的架构和特征提取能力&#xff0c;适用于不同的任务和数据集。 针对戴着口罩和戴着3D眼睛提取人脸特征…

关于Posix标准接口和Nuttx操作系统

基本介绍 主要参考&#xff1a; Linux 系统中的 POSIX 接口详细介绍_linux posix-CSDN博客 POSIX&#xff08;Portable Operating System Interface&#xff0c;可移植操作系统接口&#xff09;是由 IEEE&#xff08;Institute of Electrical and Electronics Engineers&#x…

大模型对齐方法笔记四:针对领域问答来进行知识对齐方法KnowPAT

KnowPAT KnowPAT(Knowledgeable Preference AlignmenT) 出自2023年11月的论文《Knowledgeable Preference Alignment for LLMs in Domain-specific Question Answering》&#xff0c;主要针对领域问答来进行知识对齐。 在领域问答有两个挑战&#xff1a;希望输出满足用户的要…

Notepad++ 常用

File Edit search view Encoding Language Settings Tools Macro Run Plugins Window 文件 编辑 搜索 视图 编码 语言 设置 工具 宏 运行 插件 窗口 快捷方式 定位行 &#xff1a;CTRL g查找&#xff1a; CTRL F替换&am…

小白也能看得懂的基于HTML+CSS+JS实现的五子棋小游戏

五子棋是一种起源于中国的传统棋类游戏&#xff0c;具有悠久的历史。 基本规则 棋盘&#xff1a; 五子棋通常在一个 15x15 的棋盘上进行&#xff0c;但也可以在更大的棋盘上进行。棋盘上的每个交叉点称为一个“点”。 棋子&#xff1a; 五子棋使用黑白两色的棋子。两名玩家分别…

【竞技宝】欧冠:多特抢开局失败,皇马展示顶级防守反击

本赛季欧冠决赛结束,皇马在上半场被压制的情况下,2比0击败多特蒙德夺得队史第15座欧冠冠军奖杯。比赛中多特蒙德已经展现出了不俗的状态,可是面对老辣的皇马他们还是败下阵来,皇马用顶级的防守反击给多特上了一课。通过这场比赛,相信球迷们也清楚当今足坛硬实力不可或缺。 在许…

《Effective C++》《资源管理——14、在资源管理类中小心copying行为》

文章目录 1、Terms14:Think carefully about copying behavior in resource-managing classes方法一&#xff1a;禁止复制方法二&#xff1a;对底层资源使出“引用计数法”方法三&#xff1a;复制底部资源方法四&#xff1a;转移底部资源的拥有权 2、总结3、参考 1、Terms14:Th…

7-18 对象关系映射(orm_name)---PTA实验C++

一、题目描述 一开始看到对象关系映射&#xff0c;其实我是拒绝的。这三个词凑一块&#xff0c;能是给C初学者的题吗&#xff1f; 再仔细读需求&#xff0c;才发现在课设项目已经用过这功能。Object Relational Mapping&#xff08;ORM&#xff09;就是面向对象&#xff08;O…

计算机基础之:LSM树

使用过hbase、cassandra之类nosql数据库的小伙伴对LSM树结构应该有所耳闻&#xff0c;那么这种数据结构有哪些优劣势呢&#xff0c;本文做下简单介绍。 LSM&#xff08;全称&#xff1a;Log-Structured Merge Tree&#xff09;是一种广泛应用于现代数据库和存储系统的数据结构…

《平渊》· 柒 —— 大道至简?真传一句话,假传万卷书!

《平渊》 柒 "真传一句话, 假传万卷书" 对于 "大道至简"&#xff0c;不少专家可能会说出一大堆乱七八糟的名词, 比如这样&#xff1a; 所谓 "大道" 即支撑天地运转的 "系统自动力"&#xff0c;更具体地来说&#xff0c;即是天地人以…

快手游戏《无尽梦回》官宣开测:热血动作肉鸽来袭

易采游戏网最新消息&#xff1a;5月30日11:00&#xff0c;快手自研的梦境主题动作冒险手游《无尽梦回》正式宣布开启测试。此次测试名为“肉鸽进化实验”&#xff0c;旨在测试多角色技能交会的玩法。游戏将开放32人同局竞技&#xff0c;让玩家在激烈的战斗中角逐出唯一的胜利者…

HTML如何让文字底部线条不紧贴在文字下面(既在内容下方又超出内容区域)

hello&#xff0c;大家好&#xff0c;星途星途今天给大家带来的内容是如何让文字底部线条不紧贴在文字下面。 话不多说&#xff0c;先上效果图 简单来说就是padding和margin的区别。 在网页设计中&#xff0c;有时我们想要给某个元素添加一个装饰性的线条&#xff0c;比如底部…

过滤器、监听器、拦截器的区别

过滤器、监听器、拦截器的区别 过滤器&#xff08;filter&#xff09;、监听器&#xff08;Listener&#xff09;是JavaWeb的三大组件。而拦截器&#xff08;Interceptor&#xff09;是Spring框架中的。 我们主要是要分清除过滤器和拦截器的区别&#xff1a; 实现原理&#…

overleaf 写参考文献引用

目录 1、 新建.bib 文件 2、导入引用 3、在文档中引用参考文献 4、生成参考文献列表 1、 新建.bib 文件 在Overleaf项目中&#xff0c;你可以选择导入现有的 .bib 文件或在项目中创建一个新的 .bib 文件来管理你的参考文献。 导入.bib 文件&#xff1a; 在项目文件树中点击…