React
文章平均质量分 52
关于React开发哪些事儿
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
提升 Web 应用程序的性能:如何使用 JavaScript 编写缓存服务
在本文中,我们将探索如何使用简单的数据结构在 JavaScript 中编写缓存服务。在此示例中,我们创建了缓存服务的新实例并从缓存中检索值。如果在缓存中找不到该值或已过期,我们会从服务器检索该值并将其存储在缓存中,有效期为 5 分钟,还可以使用 方法清除缓存clear()。该get()方法检索与给定键关联的值,set()设置与键关联的值,并clear()从缓存中删除所有值。在此步骤中,我们将为缓存项添加过期时间,并在它们过期时将其从缓存中移除。编码缓存服务的第一步是定义将用于访问缓存的接口。原创 2023-03-03 14:25:13 · 942 阅读 · 0 评论 -
Threejs 导入动态模型 - 兔子岛
Threejs 3d动画兔子岛,兔年吉祥!原创 2023-01-19 10:42:04 · 1913 阅读 · 0 评论 -
mapbox地图动画一键飞行
最近,Mapbox GL JS 从 v2.9 开始支持将地图显示为 3D 地球。话不多说,马上看看效果怎么样:mapbox地图动画我们通过设置投影属性,即可将地图更改为地球。原创 2022-12-01 19:15:45 · 1203 阅读 · 0 评论 -
react实现websocket消息推送
它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。并且他没有同源限制,协议标识符是ws(如果加密,则为wss)。原创 2022-11-17 18:55:13 · 843 阅读 · 0 评论 -
从源码层解读react渲染原理
对于生命周期我们只需关注比较重要的几个生命周期的运行点即可,比如render的作用、使用在挂载完真实DOM后做一些副作用操作、以及性能优化点、还有卸载时利用清除副作用。对于首次挂载阶段,我们需要了解react的渲染流程是:通过我们书写的初始元素和一些其他可以生成虚拟节点的东西来生成虚拟节点。然后针对不同的节点类型去做不同的事情,最终将真实DOM挂载到页面上。然后执行渲染期间加入到队列的一些生命周期。然后组件进入到活跃状态。对于更新卸载阶段,需要注意的是有几个更新的场景。以及key的作用到底是什么。原创 2022-08-23 15:13:24 · 545 阅读 · 0 评论 -
虚拟dom比真实dom还快吗?90%回答掉坑里了
虚拟DOM不一定会比操作原生DOM更快。虚拟DOM的优势在于节点进行改动的时候尽量减少开销React从来没说过虚拟DOM会比原生更快。框架的本质是提升开发效率,让我们的注意力更集中于数据。原创 2022-08-23 14:02:07 · 1691 阅读 · 0 评论 -
antv L7地图报错:context lost at Funciton
某天疯狂渲染地图组件,大概17次来回切换,屏幕重新渲染地图,最终它还是没能扛下所有,不幸崩塌。分析可能的原因:1、由于L7地图画布一直累加在页面上,old context 无法回溯更新,“新的来了,旧的依旧不去”,最后导致画布丢失。解决方案:重新渲染新的地图画布之前,将上一次画布销毁,直接用的destroy()方法。结果:重新渲染的时候看着是很丝滑,看上去旧的画布已经销毁不复还,再次试验发现10余次渲染之后又爆红报错了。2、查看dom节点,发现地图组件是销毁了,它的底图(图上白色背景的)依旧保留,无数个ca原创 2022-07-07 11:38:53 · 1548 阅读 · 4 评论 -
【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例、比例尺L7 目前支持 ControlZoom 放大缩小Scale 比例尺Layers 图层列表组件介绍:import { Scene, Control } from '@antv/l7';const legend = new Control({ position: 'topleft'})position: string 控件位置支持 8 个方位bottomrighttopright..原创 2022-05-31 15:56:57 · 1276 阅读 · 1 评论 -
【避坑指“难”】react-dnd引入后,.mjs文件解析错误
需要在config.js文件中添加配置:config.module.rule('mjs-rule').test(/.m?js).resolve.set('fullySpecified', false);原创 2022-05-28 22:40:40 · 1187 阅读 · 2 评论 -
【避坑指“难”】umi3分包优化,提升首屏加载时间
提升首屏加载时间原理:把大体积的包,分成多个小体积的包进行加载,减少请求时间chainWebpack配置在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置,使用 webpack 的优化模块optimization.splitChunks实现。chunks配置chunks 配置需要加上 umi,否则打包完后依旧是白屏,在控制台可看到 umi.js 和 umi.css 并没有引入。compression-webpack-plugin服务端使用gz.原创 2022-05-24 12:11:21 · 3020 阅读 · 1 评论 -
初探mapbox地图可视化实例,带你看看家附近有多少咖啡馆
本实例使用的是Mapbox GL JS,开发文档地址:请点击Mapbox GL JS 是一个用于 Web 上矢量地图的 JavaScript 库。它的性能、实时样式和交互功能为在网络上构建快速、沉浸式地图的任何人设定了标准。官网给大家准备了很多实例,可供参考学习。咖啡馆地图可视化实现效果核心代码 (React + Typescript)import React, { useEffect, useState } from "react";import { history } from ".原创 2022-05-23 10:47:25 · 996 阅读 · 0 评论 -
【避坑指“难”】React配置AntV G2 饼图
效果如下:核心代码:import { Chart } from '@antv/g2';import React, { useEffect, useState } from 'react';interface PieProps { dataList: any;}const Pie: React.FC<PieProps> = (props: any) => { const { dataList } = props; const data = dataList;原创 2022-04-07 11:49:34 · 2328 阅读 · 0 评论 -
【避坑指“难”】Antd Table可折叠嵌套List
实现效果如下图:核心功能代码给ProTable 或 Table组件配置expandable={{ expandedRowRender }}const expandedRowRender = (record: any) => { return ( <List style={{ width: 300, marginLeft: 315 }} size="small" split={false} dataSour原创 2022-04-05 17:49:17 · 1328 阅读 · 0 评论 -
无敌版可配置的查询构建器React Query Builder
基于上一篇《自定义一个玩出花来的查询构建器React Query Builder》在此基础上又做了一次升级改造,让我来看看升级后的查询构建器长什么样吧!左、右两侧支持Cascader级联菜单选择支持级联菜单Tooltip悬浮提示右侧可通过Switch开关控制:输入框input/Cascader级联菜单核心功能代码实现1、左右两侧均为自定义组件1)修改QueryBuilder组件的配置信息<QueryBuilder disabled={disabled}原创 2022-03-18 17:54:06 · 1614 阅读 · 0 评论 -
【避坑指“难”】Antd Cascader实现悬浮提示Tooltip功能
Antd文档看了几圈下来,没有给出直接配置悬浮提示Tooltip的入口,该功能和自定义新增功能差不多(【避坑指“难”】Antd Cascader实现自定义新增功能),需要重新修改下渲染逻辑。核心代码1、 对Cascader中的options进行遍历操作 options={handleCascaderTooltips(options)}handleCascaderTooltips()方法export const handleCascaderTooltips = (opt: any) => {原创 2022-03-14 15:10:40 · 1919 阅读 · 2 评论 -
【避坑指“难”】antd select 模糊搜索
<Select allowClear showSearch filterOption={(input, option) => { if (option && option.title) { return option.props.children.toLowerCase().indexOf(input.toLowerCase...原创 2022-02-10 16:29:55 · 1420 阅读 · 0 评论 -
自定义一个玩出花来的查询构建器React Query Builder
首先我们来看看官方给出demo:一键直达通过自定义Antd的Cascader组件,最后的效果如下:一、还原demo首先,我们需要把整个demo的架子还原,然后再此基础上才好做自定义拓展。1)引入所需库import QueryBuilder from 'react-querybuilder';import { AntDActionElement, AntDDragHandle, AntDNotToggle, AntDValueEditor, AntDValueSelecto原创 2022-01-29 15:25:57 · 2225 阅读 · 5 评论 -
【避坑指“难”】actionRef.current.reload()不生效
actionRef:Table action 的引用,便于自定义触发MutableRefObject<ActionType>什么时候会用到?ActionRef 手动触发:有时我们要手动触发 table 的 reload 等操作,可以使用 actionRef。interface ActionType { reload: (resetPageIndex?: boolean) => void; reloadAndRest: () => void; reset: ().原创 2022-01-29 14:40:07 · 5239 阅读 · 0 评论 -
【避坑指“难”】实现ProTable可编辑的拖拽排序
DragSortTable排序采用的react-sortable-hoc,需要提供rowKey来确定数据的唯一值,否则不能正常工作。暂不支持request请求的数据进行排序,可将request请求的数据存起来通过dataSource传入。⚠️:如果拖拽后列表没有重新排序,很大原因就是没有传入dataSource导致的。所以在request里请求到的数据还需要存入dataSource才行。ProTable配置<ProTable rowKey="index" column.原创 2022-01-29 10:49:02 · 3196 阅读 · 4 评论 -
【数据可视化】react异步加载数据并动态渲染echart柱状图
本文将实现的功能如下:通过api异步获取数据并动态加载根据数值的区间,柱状图单根柱子颜色展示不同柱状图横坐标标题过长,超出部分身略号代替一、引入echart库和加载数据的apiimport * as echarts from 'echarts';import 'echarts/lib/chart/bar';import 'echarts/lib/component/tooltip';import 'echarts/lib/component/title';import { getCha原创 2022-01-16 16:20:51 · 2574 阅读 · 0 评论 -
【避坑指“难”】Antd Tree半选状态halfCheckedKeys渲染问题
一、复现问题Antd的Tree树形组件,勾选后,如果父节点下的所有子节点没有被勾选(半选状态),传值的时候是不会传父节点的,只有在勾选了所有子节点的时候(全选状态)才会传父节点的值。二、解决方案1)在半选的状态下,也要将父节点传值给后端const [checkedKeys, setCheckedKeys] = useState<number[]>([]);const [treeData, setTreeDate] = useState([]); const [paramsList,原创 2022-01-13 17:28:20 · 6451 阅读 · 0 评论 -
【避坑指“难”】react+umi权限控制一网打尽(路由权限and按钮权限)
权限控制是业务中最最最最最常见的,通常B端需要对不同的用户配置不同的权限,相应的按钮也仅开放给部分用户可见,下面是权限控制的实现方式。一、菜单权限及路由权限1、config/routes.tsx添加access权限控制标识{ path: '/userCenter', name: '个人中心', access: 'userCenter', icon: 'GroupOutlined', hideInMenu: true, routes: [ {原创 2022-01-09 22:26:47 · 5231 阅读 · 0 评论 -
【数据可视化】基于React使用antv/L7绘制中国地图钻取
L7 空间数据可视分析蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。代码实现使用import { DrillDownLayer } from '@antv/l7-district';DrillDownLayer 提供默认提供通过 Layer 的交互事件,实现上钻下钻的交互,默认点击当前图层(click)向下钻取,双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。map.tsxi原创 2021-12-30 11:51:57 · 2424 阅读 · 0 评论 -
【避坑指“难”】React实现阿里云oss上传文件代码示例
在utils中封装下列方法oss基础配置export const ossConfig = () => { return { OSSAccessKeyId: '你的OSSAccessKeyId', AccessKeySecret: '你的AccessKeySecret', expire: 87600 //过期时间 }上传文件的方法export const uploadFile=(file:any)=>{ const OSSAccessKeyId = o原创 2021-10-10 15:02:07 · 777 阅读 · 0 评论 -
【知识总结】前端高频React面试题合集
React中keys的作用是什么?keys是react用于追踪哪些元素被修改、 被添加、被移除的辅助标示。render(){ return( <ul> { this.state.list.map(({item,key})=>{ return <li key={key}> {item} </li> }) } </ul> )}在开发过程中,我们需要保证某个元素的key在其同级元素中具有唯一性。原创 2021-09-18 23:31:57 · 619 阅读 · 0 评论 -
【避坑指“难”】markdown编辑器怎么实现,首推掘金同款@bytemd/react
Github直达车:bytemd官方demo直达车:bytemddemo如下图:掘金的markdown长这样:借鉴一下,最终实现的效果长这样:markdown实现过程场景:官网文档编辑器、白皮书、个人博客,能用到markdown的一切场景本次针对的场景是官网文档中心,普通用户只可查看文档,管理者可登录进行文章编辑发布1、引入@bytemd/react库,使用的是Editor,Viewer两个组件,这两个组件根据用户权限判断Editor:编辑模式,针对管理者Viewer:阅读模式原创 2021-04-17 14:19:05 · 3452 阅读 · 13 评论 -
Html5+Ant-Motion实现官网Banner视频、图片轮播
轮播banner使用的动画库:Ant-Motion官方给了很多小demo,可以随意捣鼓实现后的效果如下图播放视频采用的是Html5中的video <video style={{ width: "100%", height: "100%", objectFit: "cover" }} autoPlay muted loop> <source src={item.video} type="video/mp4"&原创 2021-04-17 12:00:07 · 1370 阅读 · 4 评论 -
React hooks之useImperativeHandle使用实例
useImperativeHandleuseImperativeHandle(ref, createHandle, [deps])useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值,与 forwardRef 一起使用。封装两个子组件:combine.jsimport React, { useState } from 'react';import Invite from "../invite"import Login from "../login"c原创 2021-03-26 11:34:33 · 522 阅读 · 0 评论 -
【避坑指“难”】两大场景:接口定时任务、页面跳转后清除定时任务(useRef)
“ 不懂业务的程序猿不是好攻城狮 ”场景来了,好好审题,开发效率提高30%做查询时,我们一般直接调search接口请求结果,现在需要隔15s请求detail详情接口,当查询状态成功时,跳转到结果详情页;反之,提示查询失败。<Form form={formRef}> <Form.Item name="name"> <Input onPressEnter={onPressEnt.原创 2021-01-22 15:10:20 · 482 阅读 · 0 评论 -
React企业级项目实战2——umi框架
umi是⼀个可插拔的企业级 react 应⽤框架。一、为什么用umi?开箱即用,内置 react、react-router 等类 next.js 且功能完备的路由约定,同时支持配置的路由⽅方式完善的插件体系,覆盖从源码到构建产物的每个生命周期高性能,通过插件支持 PWA、以路由为单元的 code splitting 等支持静态⻚面导出,适配各种环境,⽐如中台业务、⽆线业务、egg、⽀付宝钱包、云凤蝶等开发启动快,⽀持⼀键开启 dll 和 hard-source- webpack-plugin原创 2021-01-16 12:35:40 · 1602 阅读 · 0 评论 -
React企业级项目实战1
Generator:生成器函数Generator函数是ES6提供的一种异步编程解决方案,语法行为和传统函数完全不同。function关键字与函数名直接只有一个*yield定义了内部不同的状态yield表达式只能在Generator函数⾥使用,在其他地方会报错function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenera原创 2021-01-10 14:49:30 · 435 阅读 · 0 评论 -
【避坑指“难”】全网最全面的-基于React实现PDF预览功能(react-pdf-js VS react-pdf)
由于业务需求,PM让我实现H5直接预览PDF,好家伙,我以为真的就像他说的一样,殊不知,横竖都是二,到处都是坑,真的是“井田”啊!常见的PDF预览功能主要三个方向来实现:读PDF文件,进行预览展示(通常是XXX.pdf文件)读PDF文件链接,进行预览展示(https://192.168.0.1/mock/downloadPdf?params=xxx)读Base64编码后的PDF,进行预览展示(比较少见,除非业务场景需要)react-pdf直达地址:https://www.npmjs.com/原创 2020-12-20 14:25:04 · 5629 阅读 · 7 评论 -
【避坑指“难”】复选框☑️勾选,按钮可点击。常用于注册页、须知页,同意XXX协议(内含material-ui的坑)
PM:“用户需要同意XXX协议,才能点击按钮,否则就给它置灰!!!”我:你说的对在项目中经常会有这样需求,特别是在H5移动端,成了家常便饭,今天来详细讲讲代码实现过程。技术栈:react + material-ui + typescript实现效果如下下面放上主要代码,主要逻辑在于复选框checkbox和按钮button,上面的文字布局就不赘述喽。由于使用的是material-ui,所以部分组件名字和antd是有区别的,大家举一反三就好啦。部分逻辑会写在注释里!!!HTML<G.原创 2020-12-04 17:22:56 · 1085 阅读 · 1 评论 -
【场景实现】React+material-ui+typescript实现H5上传身份证后显示图片 ,FileReader.readAsDataURL()方法读取图像信息
原理readAsDataURL方法用于读取指定的内容File。读取操作完成后,readyState变成DONE,并loadend触发。那时,该result属性包含数据作为数据:URL表示文件数据为base64编码的字符串。举个栗子HTML<input type="file" onchange="previewFile()"><br><img src="" height="200" alt="Image preview...">Javascriptfunct原创 2020-12-02 16:28:50 · 1291 阅读 · 0 评论 -
【前端面试】React中的key是什么,它有什么作用?
标识唯一性比如在React的源码中,reconcileSingleElement协调方法,key用来比较两个元素,看能不能实现复用,如果能复用就直接使用该元素,不能则创建一个新的元素。if key === null and child.key === null,then this only applies to数组进行对比原先是一个链表结构,不方便取值,这时我们可以通过数组来完成。更新结点时需要key值判断是否相同元素。此外在fiber中,通过map图,用get方法拿到key值,就能获取对应原创 2020-11-29 21:01:10 · 461 阅读 · 0 评论 -
【前端面试】从React源码中学习diff算法原理和实现过程
虚拟dom、diff策略是React最值得称赞的地方,但是很多同学对其还是一知半解的状态,这也是面试官特别爱问的一道题,你现在不知道,早晚有一天得知道,不如每天积累一点,少一些功利主义的追求,多一些不为什么的坚持,diff算法学会了,还怕瓶颈期过不去吗?先了解什么是reconciliation协调在某⼀时间节点调⽤ React 的 render() ⽅法,会创建⼀棵由 React 元素组成的树。在下⼀次 state 或 props更新时,相同的 render() ⽅法会返回⼀棵不同的树。React 需要原创 2020-11-28 20:32:20 · 416 阅读 · 0 评论 -
【每日卤一题】React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n)是怎么得来的?
关于O(n^3)怎么计算出来的这里的n指的是页面的VDOM节点数(虚拟节点数),这个不太严谨。如果更严谨一点,我们应该应该假设变化之前的节点数为m,变化之后的节点数为n。React 和 Vue 做优化的前提是“放弃了最优解“,本质上是一种权衡,有利有弊。React 和 Vue 做的假设是:检测VDOM的变化只发生在同一层检测VDOM的变化依赖于用户指定的key注意:如果变化发生在不同层或者同样的元素用户指定了不同的key或者不同元素用户指定同样的key, React 和Vue都不会检原创 2020-11-24 09:52:34 · 816 阅读 · 0 评论 -
【每日卤一题】React 中 setState 什么时候是同步的?什么时候是异步的?
这里所说的同步异步, 并不是真正的同步异步, 它还是同步执行的。异步指的是多个state会合成到一起进行批量更新。希望初学者不要被误导原创 2020-11-20 09:51:10 · 239 阅读 · 0 评论 -
React虚拟dom原理(看源码啦~)
学习虚拟dom之前,当然的知道jsx是干嘛用的,就像我们吃饭,吃西餐时得学习用刀叉,刚开始会吃饭时得学会怎么用筷子。JSX1、 什么是JSXJSX就是大家所说的语法糖,React 使用 JSX 来替代常规的 JavaScript。此外,JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。2、为什么需要JSX开发效率:使用 JSX 编写模板简单快速。执行效率:JSX编译为 JavaScript 代码后进行了优化,执行更快。类型安全:在编译过程中就能发现错误。3、原理ba原创 2020-11-19 23:00:50 · 383 阅读 · 0 评论 -
【每日卤一题】列表组件中为什么要用到key?不写行吗?
React和Vue官网都推荐的使用key,应该理解为:使用唯一id作为key因为index作为key,和不带key的效果是一样的。index作为key时,每个列表项的index在变更前后也是一样的,都是直接判断为sameVnode然后复用。说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。正是因为带唯一key时每次更新都不能找到可复用的节点,不但要销毁和创建vnode,在DOM里添加移除节点对性能的影响更大。所以会才说“不带key可能性能更好”。不信试试看原创 2020-11-19 18:46:30 · 235 阅读 · 0 评论