React全家桶系列
文章平均质量分 82
一起学习React,辅助博客加深巩固,努力是奇迹的别名!以实战为线索,逐步深入React开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力,增加项目经验
一百个Chocolate
一个小帅哥和某厂前端搬砖。
频道内容: 前端技术,编程,我的思考。
用心去做自己热爱的事情️
座右铭: 学如逆水行舟,不进则退。
展开
-
React + TS 中实现鼠标水平拖动,横向滚动 | Mouse click and Drag Instead of Horizontal Scroll bar
背景最近接到一个新需求,就是有一个流程的东西,而这个流程可能会比较多,那么在水平就需要 scroll-x,表面上使用触摸板双指即可拖动,但是产品和测试讨论之后觉得鼠标也需要拖拽滑动。但鼠标可以通过点击滚动条即可滑动,那么,既然需求砍不掉,那就试着做一做。具体任务也很明确了,就是希望鼠标在流程中可支持拖动。寻找答案在网上找了许多的资料,实在是太多重复而无用的内容了,不过功夫不负有心人,找到了几篇有用的资料,如下:Mouse click and Drag Instead of Horizontal原创 2021-11-15 15:43:51 · 1878 阅读 · 0 评论 -
React 中使用 braft-editor 踩坑记,引用 braft-utils 有错误
最近接到一个需求,需要支持在文本输入框支持图片粘贴上传,但是在我们这边管理页面,对于用户提的一些问题显示又不支持 Matkdown。所以选择 braft-editor 来实现,发现提供一些配置项,因为我这边不需要那些加粗,下划线等等按钮,只需要上传图片,粘贴然后配合 COS 存链接就好了。遇到的问题首先我这个是 React 项目,其它项目不太清楚,然后使用 yarn。在 utils 官方仓库中,有相关 issues,链接在下方:引用 braft-utils 有错误 #500其中也有人提及了一些解原创 2021-10-15 17:51:03 · 2689 阅读 · 1 评论 -
【React 系列 01】❤️ 在工作中对于 Custom React Hooks 一些思考
当我刚接手 React 项目的时候,就对整体项目代码看了一遍,其中就有一个命名为 customer-hooks,打开一看,全都是命名为 usexxx 的 jsx 文件,后面了解到这是大佬们封装的自定义 hook。于是,今天就自己来总结一下对于 Custom React Hooks 一些思考。自定义 Hook以下来自 React 官网 关于自定义 Hook 的介绍:与 React 组件不同的是,自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么,以及它应该返回什么(如果需要的原创 2021-10-04 12:30:36 · 1160 阅读 · 0 评论 -
【React 系列 02】❤️ Custom Hooks 中使用 React Context
在上一篇 对于 Custom React Hooks 一些思考 文章末尾提及了 React Context,那么在本篇中我们将了解一下 React Context 怎么解决状态共享问题以及一些其它想法。关于 React Context提供 官网对于 usecontext 的介绍const value = useContext(MyContext);无论组件在组件树中的深度如何,React Context 都为组件提供数据。 上下文用于管理全局数据,例如 全局状态、主题、服务、用户设置等。那么我原创 2021-10-04 20:20:57 · 769 阅读 · 0 评论 -
【已解决】在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob
今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误:Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'现在解决了,用简单的话语总结一下:因为 antd 会对原生文件上传包装一下:拿着个属性值就好了:originFileObj最后解决了问题,完美。...原创 2021-09-27 14:08:15 · 2385 阅读 · 1 评论 -
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」
入门实战系列,小白也能增加编程经验,我的开源之作。原创 2021-08-27 09:58:08 · 404 阅读 · 0 评论 -
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
入门实战系列,小白也能增加编程经验,我的开源之作。原创 2021-08-26 09:30:57 · 899 阅读 · 7 评论 -
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
入门实战系列,小白也能增加编程经验,我的开源之作。原创 2021-08-24 09:24:10 · 1101 阅读 · 10 评论 -
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
入门实战系列,小白也能增加编程经验,我的开源之作。原创 2021-08-21 16:45:01 · 477 阅读 · 0 评论 -
【已解决】react 简书项目,全局引用后iconfont图标变成方块问题
背景最近,在做 react 简书项目时候,使用 iconfont 时,出现图标变成方块问题,想了想,应该没有什么问题啊,后面发现 styled-components 中创建全局样式替换成了 createGlobalStyle。解决createGlobalStyle 时,需要导出当前全局样例,例如我的 iconfont.js 文件代码如下:import { createGlobalStyle } from 'styled-components';/* 使用 reset.css 设置默认样式*/ex原创 2020-10-13 23:28:31 · 1645 阅读 · 3 评论 -
【源码篇:总结与思考】虚拟节点与DOM Diff算法源码实现
DOM Diffdom diff 其实就是对比两个虚拟节点,然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异,然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。而对于虚拟节点呢,我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来,通过比较两个新老虚拟节点,得到彼此的差异,形成一个补丁,最后再与真实的 dom 进行匹配,将这些补丁打到真实 dom 上去,最终,我们还是操作了原来的真实 dom,但是我们是用了差异化结果的 最小的代原创 2020-09-27 20:28:39 · 609 阅读 · 2 评论