React
文章平均质量分 57
业火之理
这个作者很懒,什么都没留下…
展开
-
【React】类excel表格的开源项目handsontable
最近在浏览时发现了一个开源项目handsontable,功能相当强大。虽然handsontable是dom做的,但是不妨碍其类似于canvas那种excel的操作手感。原创 2022-08-30 15:11:35 · 1442 阅读 · 0 评论 -
【React】antv S2快速上手
之前我司一直用葡萄城的excel,但后来没人维护,搞起来麻烦。最近antv s2开源,界面漂亮功能强大,试用了下觉得很不错。原创 2022-07-12 16:58:31 · 3899 阅读 · 1 评论 -
【React】利用proxy实现发布订阅思路
参考的formily最小实现,记录下启发。原创 2022-07-10 02:10:30 · 327 阅读 · 0 评论 -
【React】利用Dooringx快速制作H5搭建平台
前言Dooringx目前到了0.15.1,后面对于大的改造应该比较少了,可以基于此研发自己的H5搭建平台。快速上手首先创建个文件夹,例如dooringx-example。我们推荐使用Umi脚手架快速搭建我们的项目。在文件夹内使用命令yarn create @umijs/umi-app 或 npx @umijs/create-umi-app安装dooringx-lib:yarn add dooringx-liblib中部分组件来源于antd和其icon。需要安装antd和icon。动画部分主原创 2022-04-28 00:42:22 · 2164 阅读 · 0 评论 -
【React】formily2.0快速上手
官网文档:https://formilyjs.org/zh-CN/guide思维导图:https://github.com/li9269391/formily-xmindcore文档:https://core.formilyjs.org/zh-CN/api/entry/create-form快速上手首先用create-react-app开个项目安装antd moment @formily/antd导入样式:@import 'antd/dist/antd.min.css';@impo原创 2022-04-23 16:13:21 · 4676 阅读 · 9 评论 -
【React】pixiu-admin后台管理模板
前言在一段工作时间后发现后台管理容易出现各个后台系统间内页互嵌,以及别的系统(已做成微应用)的嵌入。另外在开发中,你不能保证每个人的代码都写的没性能问题,可能某人写的页面影响了整个应用。所以我着手制作了个iframe多tab后台管理模板玩玩。源码地址https://github.com/yehuozhili/pixiu-admin优势iframe多tab天然支持keepalive,完好保留状态。在一线后台管理操作员很喜欢多tab来回切换,以增加其工作效率。完好保留页面状态。支持微原创 2022-02-23 17:33:32 · 341 阅读 · 0 评论 -
这可能是目前最好用的开源可视化拖拽框架
前言hello,大家好,我是dooringx-lib的作者。今天刚刚开源了我们dooringx项目的可视化拖拽框架dooringx-lib。和别的开源项目比,dooringx-lib除了提供基础的编辑器功能,还有自己独特的弹窗系统与事件机制。项目仓库:https://github.com/H5-Dooring/dooringx项目文档:https://h5-dooring.github.io/dooringx/下面就来简单介绍一下。编辑器基础功能dooringx-lib的所有组件都是可拆分原创 2021-07-29 06:32:05 · 5672 阅读 · 0 评论 -
【react】blockly结合react快速上手
前言最近玩了blockly,感觉太强大了,原来scratch也是blockly做的。文档blockly文档:https://developers.google.com/blockly/guides/overview?hl=enblockly开发工具:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html快速上手首先安装blocklynpm i blocklyblockly 主要靠xml注入和原创 2021-07-21 11:36:09 · 1161 阅读 · 0 评论 -
【react】僵尸children与陈旧props问题
前言以前我文章草稿箱里一直躺着篇还没整完的这问题,结果我自己一直没整明白呢,bug倒是给官方修好了。这个bug来源于react-redux,这个库还是很有名的,当时发现bug时我的水平要是比现在还高说不定还能拿个contributor。确实这个问题过于复杂了,会涉及很多关于react调度方面的知识。僵尸children与陈旧Props在react-redux官网里,就有介绍这个bug的,另外还有人写了个长文分析:https://kaihao.dev/posts/Stale-props-and-原创 2021-06-21 22:05:08 · 354 阅读 · 2 评论 -
【react】react18由render替换为createRoot区别
前言18版本由render替换为createRoot,看看有什么区别和为什么要这么做。render与createRootreact18中装载了2个api,所以你用以前的也没事。在源码中都有导入:import { findDOMNode, render, hydrate, unstable_renderSubtreeIntoContainer, unmountComponentAtNode,} from './ReactDOMLegacy';import {create原创 2021-06-14 21:17:47 · 10915 阅读 · 0 评论 -
【React】react-shadow原理(shadow-dom的探索)
前言突然对shadowdom感兴趣了,然后实现发现了很多坑,特此总结一下。实现原理函数组件我实现的有点bug,就是子组件的自己的状态无法改变,暂时不清楚为啥,如果有需要可以看一下react-shadow的实现:https://github.com/Wildhoney/ReactShadow/blob/master/src/core/index.js#L19类组件实现起来倒是没啥问题:export class ShadowView extends React.Component { sta原创 2021-05-30 02:54:08 · 1109 阅读 · 0 评论 -
【React】antd在线换主题
前言最近整个antd在线换主题功能,结果发现官方居然没有这功能。只能一开始写死。后来研究了几种方法,记录一下。方案一换less使用antd-theme-generator先生成less颜色变量,在index.html中使用less加载,在js中切换less变量。请注意antd的位置,因为我这项目是lerna的所以位置跟一般的不太一样。const path = require('path');const { generateTheme } = require('antd-theme-ge原创 2021-05-10 10:34:21 · 1811 阅读 · 1 评论 -
【React】如何用优雅的方法写connect?
前言我在使用taro脚手架时,选择react+redux+ts模板时,会拉到一个写着装饰器connect的模板,事实上用该模板在那页会看到@connect那里完全报错,并没有很好的解决这个问题,那么如何优雅的写connect呢?对此我查阅了些资料。万能ANY我们先讨论如何才能不报错,最简单的写法当然是利用any了。方案1装饰器后使用any解决:@(connect(mapStateToProps,mapDispatchToProps) as any)方案2利用require进来原创 2021-04-24 20:47:40 · 691 阅读 · 0 评论 -
【React】信号灯面试题
前言无意中看见瓶子君推送的一篇阿里面试题文章,作者没做出来,然后喊别人做的。我们做做玩玩。题目/** 1. 信号灯控制器用 React 实现一个信号灯(交通灯)控制器,要求:1. 默认情况下, 1.1. 红灯亮20秒,并且最后5秒闪烁 1.2. 绿灯亮20秒,并且最后5秒闪烁 1.3. 黄灯亮10秒 1.4. 次序为 红-绿-黄-红-绿-黄2. 灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置,如: lights=[{color: '#fff', duration:原创 2021-03-07 01:33:56 · 541 阅读 · 0 评论 -
【react】tsconfig.json中配置react-jsx报错解决方案
复现使用新版cra安装ts后,tsconfig报错无法使用react-jsx。解决方法请在查看TS文件时调出命令托盘(cmd + shift + p)并键入“ select typescript version”,选择选项,然后选择“使用工作区版本4.1.2”。为了确保解决问题,将依赖修改为4.1.2安装。...原创 2020-12-08 10:51:15 · 3446 阅读 · 1 评论 -
【React】antdpro开发指南
前言后台管理系统用的非常多,如果比较复杂点的后台可能会多人开发,这时候可能导致各种样式不统一之类的问题。antdpro用起来有一定学习成本,所以需要梳理一下。快速上手npx create-umi your-project选择最新v5,antd4启动npm run start即可看见页面。登录页默认用户名密码是admin ant.design 。输入进去即可进入后台。进入后右下角有个米饭一样的图标,那个就是umi-ui,可以非常方便的导入代码或者模板进行修改。注意原创 2020-11-20 15:29:51 · 5824 阅读 · 6 评论 -
【React】facebook最新状态管理库Recoil
前言我感觉这个recoil还是挺有前途的,因为redux实际有些不太好的地方,我草稿箱里还有篇讨论redux僵尸children与陈旧props的文章没整理出来。一个库出来我们先学会去使用他,再去搞原理什么的。这玩意有官方光环,必然不是那种随便写写就不维护了或者只是个玩具的东西。它这个库应该是解决redux祖先传来导致更新问题,同时也解决僵尸children与陈旧props的问题,也就是异步刷新取值。本来我也想自己写个类似的东西,既然有官方的就懒得写了。https://recoiljs.org/d原创 2020-11-16 03:00:31 · 633 阅读 · 1 评论 -
【React】手写虚拟滚动组件(二)可自动获取不定高度的虚拟滚动组件
前言上次那篇写的虚拟滚动后来使用发现在某些情况并不是特别好用,并且只支持固定高度。我看了下umihook的虚拟滚动,发现也不是很好用,它支持手动设定每个元素高度,但也不能支持不定高度,而且限定更多了,比如不能在同一个滚动dom下绑定多个虚拟滚动,对跨组件调用不太友好,甚至第一次出现可能不会显示,需要划一下或者使用scrollto才会出现。不过umihook的有些设定还是可以对我有些启发的。加上以前我就知道有种方法可以不用知道高度进行虚拟滚动,所以就写写这玩意。思路我以前写的虚拟滚动,有些参数可原创 2020-11-01 09:50:14 · 2007 阅读 · 1 评论 -
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头,然后就踩了几个坑记录下。踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/library 与https://www.npmjs.com/package/@zxing/browserzxing/browser是最近才建立的,根据我的使用发现zxing/browser有bug,他目前没法像zxing/library一样使用stop或者clean来终止摄像头使用。在pc端使用zxing/原创 2020-10-30 20:59:37 · 3224 阅读 · 0 评论 -
【React】antd popover定位不准闪跳解决+自己实现popover库
前言我在写H5-dooring时,发现我们用的popover会发生闪跳,而且第一次闪跳就算了,每次还会有另一个方向的闪跳。于是我大概百度了下,基本都说需要给固定宽高即可,让后试了下发现没用,就算触发组件和弹窗元素都给了宽高,也一样闪跳。由于antd的popover套别人的库,别人的又套别人的,别人的再套别人的,所以我懒得翻了,直接自己写一个。初步实现首先,我对popover粗略进行实现,主要就是一个弹窗定位问题,然后我照我预想实现后发现,一样会出现闪跳,但只有第一次会闪跳,后面比较正常:原创 2020-10-17 22:54:07 · 2589 阅读 · 1 评论 -
【React】基于Antd 制作的纯前端客服机器人
简介由于客服机器人场景使用很多,大部分都需要前后端通信,甚至可能还需要智能对话平台利用 nlp 进行处理,不说那些平台需要花钱,如果自己写前后端写起来也相当麻烦,所以我着手制作了个只需要前端并且支持对话定制的客服机器人。当然,同时支持使用后端或者平台。ui 使用了 antd,这样很多人能看得懂代码并且方便定制修改。几乎所有样式都暴露出来,可以直接进行修改样式。antd 配置项也几乎全部暴露出来,满足各种特殊需要。github地址:https://github.com/yehuozhili/chatb原创 2020-09-12 18:17:22 · 2239 阅读 · 12 评论 -
【Gatsby】Gatsby模式以及基本操作
前言又研究了下这玩意,终于大概理解咋回事了。gatsby它自带的graphql会先收集项目的一些信息,然后做成graphql服务,包括各种文件之类,比如用插件搞得markdown或者图片文件,都是这种模式,被收集到gatsby的graphql架构中。在编写页面时,可以通过它提供的组件或者api查询graphql中存放的数据,从而渲染出来。在gatsby-node中可以做一些node上的动态渲染操作。在最后build时,graphql架构会转换成静态数据,然后生成静态网站。如果需要ssr的话,也可原创 2020-09-08 19:06:01 · 1176 阅读 · 1 评论 -
【Gatsby】Gatsby初体验
前言喜欢用静态网站工具的同学可能都发现,大部分静态网站工具,或者一些页面生成器都是基于Gatsby这玩意做的,比如storybook,umi之类,都能看见这玩意影子。今天试玩一下。官网:https://www.gatsbyjs.com/docs/quick-start/这玩意名字起的很有特色啊。。。不过我好像没翻到名字由来。这玩意生态相当强大,做个模板还可以收费。安装官网推荐使用cli进行安装npm install -g gatsby-cli拉个helloworld :gat原创 2020-09-07 13:43:10 · 396 阅读 · 0 评论 -
【react】react-dnd拖拽快照偏差解决方法
前言试着用react-dnd进行拖拽轮播图,拖拽快照上会有偏差。经过一系列探究,找到了几种解决方法。探究原因react-dnd里为了方便各个后台的使用,把transform保存成数据,结果只要拖拽的元素存在transform,或者不停的transform,就会产生快照不对位的问题。解决方法第一种方法,就是直接换图片。react-dnd提供preview,直接换图片即可解决快照问题。第二种方法,使用preview的位移偏差,由于transform被使用,但是还留有top和left未被使用原创 2020-08-31 12:22:49 · 1162 阅读 · 0 评论 -
【react】react-dnd制作个国际象棋里马的跳法
前言最近看见个拖拽库叫react-dnd ,好像比较牛b,试用下玩玩。文档https://react-dnd.github.io/react-dnd/ 这个地址比较墨迹,一般人访问不上。大概简单看了下文档,文档的意思是,他们这个库是类似redux架构,而且分了Backends,item,monitor,Connectors等概念。反正尼玛看了就不想看的那种。我这里直接记录下我的操作流程。流程首先使用cra初始化项目,为了更快的便于我理解这个库,所以使用ts制作。先做个????原创 2020-08-29 09:01:35 · 455 阅读 · 1 评论 -
【React】修改原引用时警惕返回新引用
前言我们知道react是提倡每次更新返回一个新引用的,实际不返回新引用也是可以的,只要自己手动更新即可,我这次写个拖拽树组件时只在原引用上修改,手动更新,结果产生了个bug。bug现象这个现象是在组件卸载后重新进入产生的,组件未卸载时一切正常。当组件卸载后再次进入,会导致key重复。产生多个相同树列表项。解决方案源码我就不放了,这组件写的还是挺长的,就说关键地方,就是我有个修改父亲的方法,因为拖拽会改变树的层级,所以对应的,需要先脱离自己父亲。就是这个脱离自己父亲方法里原本这么写的:原创 2020-08-05 19:55:05 · 177 阅读 · 0 评论 -
【React】Message组件实现原理
前言以前自己写的message组件有bug,并且逻辑不全,我看很多人包括antd都是拿写好的rc-notification制作的,上次看了react-keepalive后,感觉自己水平又提升了,这玩意其实自己也能写出来。原理首先梳理下这个原理。我以前写的那个message也能用,但是有个bug,虽然dom卸载了但是fiber没卸载掉。这就有可能造成内存泄漏(这个效果估计得触发超过10w遍且一直不刷新页面才能看得出来)。首要的难点就是组件卸载问题,所以组件它除了要卸载掉dom,fiber也得卸原创 2020-07-26 17:07:54 · 3233 阅读 · 0 评论 -
【React】react-keep-alive实现原理
## 前言- 上次看见了peter谭的分享,终于完全搞懂了react-keep-alive。以前写的那个版本只能临时凑合用,解决不了根本问题。- 这个实现的思路很值得借鉴,并不是一个常规思路。原创 2020-07-20 14:27:22 · 6158 阅读 · 2 评论 -
【React】Could not find router reducer in state tree解决方法
前言这个问题是我新装一个环境时出现的,使用的是"connected-react-router": "^6.8.0",原因经排查,是由于history的最新版不兼容connect-react-router导致。history的最新版为5.0,而connect-react-router使用的history版本为4.7,从而导致reducer执行错误。解决不显示安装history或者指定老版本history进行安装。否则自己安装的history是使用history5。...原创 2020-07-08 00:02:10 · 1464 阅读 · 0 评论 -
【React】用了connected-react-router一定要让一个组件用withRouter或者Route包裹才能获取路由方法?
前言有个小伙伴发问:为什么一个组件要用withRouter包裹?不是使用了connected-react-router把路由信息存到store了吗?我仔细一想,觉得很有道理,其实确实可以不通过withRouter包裹获取history方法。前置知识我们知道,withRouter其实相当于<Route component={xxxx}/>,而最上层是被Router包裹的,为此有基于Router制作的各种增强版Router。connected-react-router就是其中之一,它可原创 2020-06-21 00:02:18 · 2755 阅读 · 1 评论 -
【React】FontAwesomeIcon按需引入TreeShaking攻略
前言最近写组件库用了这玩意,但是实验发现并不能treeShaking掉,于是来详细探究下其中原因。测试代码首先使用未按需引入的图标进行实验(按需引入是默认导出+@fortawesome/free-solid-svg-icons/xxx)。import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faCoffee } from "@fortawesome/free-solid-svg-icons";原创 2020-06-18 02:09:27 · 748 阅读 · 1 评论 -
【React】警惕加入动画导致因key产生的渲染错误
前言我这次写个多选框,多选框其实挺好写的,但是如果要加入动画效果,那就有点不太好搞了。做这个动画,还犯了个key的错误,导致渲染错误,让我想记录下来。多选框原理先说下我的多选框原理,为了后面读者可以了解这个key的错误到底怎么发生的。正常不带动画的多选框,就是有个状态去记录传来data的索引,然后有个状态根据索引记录要渲染的data,这样当选中一个data,那么这个data会记录到索引,然后索引改变后就改变state,再根据state改变渲染结果。而选中删除则是获取了选中的元素索引,匹配到索原创 2020-06-10 15:22:23 · 441 阅读 · 0 评论 -
【React】手写并封装受控组件自定义hook表单验证器(附组件库线上体验地址)
前言有小伙伴说写组件库封装表单没有思路。我一开始感觉确实有点不太好写,如果自己写了自己用也就算了,做成封装给别人用的那考虑东西就有点多。后来有人发了个react-hook-form的仓库,我一看,这种利用自定义hook做验证的思路很不错啊,于是自己手写个。组件库线上体验地址https://github.com/yehuozhili/bigbear-ui原理react-hook-form的使用方式需要拿到组件实例,对于我的组件库基本都是用函数组件写的且并未用forwardRef包装的轻量级原创 2020-06-05 07:34:37 · 1375 阅读 · 0 评论 -
【React】防抖自定义hook,狸猫换太子
前言我这也是看了别人学到的,一般我们防抖就写个防抖函数然后一套就完事了,我看见的这个防抖hook思路清奇,玩了个狸猫换太子,让我想记录下来。思路比如输入框要触发个搜索查询,那么就搞个防抖,正常来说,我们把防抖函数套在原来执行逻辑上就ok,实际频繁触发的是防抖函数,而不是防抖包着的那个函数。而我这次看见的这个思路是延迟值的内部更新。就是在受控组件里,用户输入的值会在组件的状态中,这个hook自己维护一个状态,替代原来组件真正的值的状态,而执行函数,从本来依赖真正的值,到依赖这个替代的值,利用u原创 2020-05-27 12:17:36 · 898 阅读 · 0 评论 -
【React】hooks的心智模型是什么鬼?
前言最近无意中看见一个分享贴,里面有人说了hooks的心智模型不被很多人知道。我就好奇hooks有心智模型?心智模型到底是啥玩意?专门去翻了下。Hooks心智模型起源根据我百度到的,中文里出现这个心智模型应该是基于这篇文章。其中文章写的很清楚了,有几个地方比较关键。就是性能好坏主要是看代码做了什么,如果代码做了相同的事但是写法不一样,那么他们之间的差别就是心智模型上的差别。那篇文章就举例这个函数组件和类组件干了相同的事,但是代码写法不一样,使得mental model是这2种写法间的最大区别原创 2020-05-24 04:42:57 · 1043 阅读 · 0 评论 -
【React】React源码梳理笔记(十四)
前言本篇看一下Suspense和lazy到底啥玩意。示例lazy和suspense的组合有点意思,一般用来做代码分割用,但里面如何实现的?我只知道分割部分是用webpack的import语句写的,毕竟这个是用户自己写的,里面感觉像是啥都没干一样。这就有点像webpack的cssloader,你感觉cssloader好像啥都没干,毕竟你写的本来就是css或者被预处理器转成了css,那么要cssloader干啥?实际上cssloader写的相当复杂。import React, { Compone原创 2020-05-08 18:12:49 · 403 阅读 · 0 评论 -
【React】React源码梳理笔记(十三)
前言接上篇,剩下函数组件和hooks。更新逻辑——支持函数组件跟类组件其实一样,相同地方加逻辑。function beginWork(currentFiber){//如果原生dom,需要创建真实dom元素。current会变 if(currentFiber.tag===TAG_ROOT){//根不需要建真实dom updateHostRoot(current...原创 2020-05-07 17:34:57 · 166 阅读 · 0 评论 -
【React】React源码梳理笔记(十二)
前言上一篇是初次渲染,本篇是更新逻辑。本篇理解上不一定对,因为这部分相当复杂,我找的不同资料的人理解各不相同,后续有新理解另外发文。司徒正美fiber理解司徒正美关于alternate的解释更新逻辑——元素渲染实现前面初次渲染时,我们已经得到了一个完整的fiber树,并且树上链接着副作用链表。而react的更新逻辑,也是走workloop,由于基于idleCallback,...原创 2020-05-06 18:21:23 · 268 阅读 · 0 评论 -
【React】React源码梳理笔记(十一)
前言结合前面知识,本篇粗略实现下fiber。虚拟dom处理先对babel转译的createElement进行编写,完成基础功能,再给react-dom。createElement.jsfunction createElement(type, config, ...children) { delete config.__self; delete config.__s...原创 2020-05-04 18:09:21 · 180 阅读 · 0 评论 -
【React】React源码梳理笔记(十)
前言本篇继续梳理下fiber基础知识。Fiber树从上一篇可以发现,解决浏览器卡顿其实是把一个大任务拆成多个小任务。而react里,diff操作可以算是一个非常大的任务,所以需要将这个大任务拆成多个小任务解决。那么如何拆呢?就是通过把一个递归操作,变成一个可中断操作。和上一篇原理一样,每次完成一个小任务,检查时间够不够执行下一个任务,不够的话将控制权交给浏览器,等待浏览器渲染完继续...原创 2020-05-02 15:18:54 · 509 阅读 · 1 评论