![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 53
百岁如流富贵冷灰
17年毕业,一直从事前端开发,有小程序开发经验,react熟练工,vue开发略有接触,丰富的后端对接经验
展开
-
react-router v6嵌套路由重定向
这样配置有一个问题就是当我访问根目录的时候:localhost:1234/。这个时候只会展示Main组件内容,但是我想让他重定向到/feature-management,我配置了。最终的处理结果是:我仅仅把Main组件的path 从。嗯,有点小无语,研究了半天才发现。,然后就可以实现了。原创 2022-09-08 18:30:51 · 968 阅读 · 1 评论 -
使用vite+react搭建项目踩坑记录
vite+react搭建项目,这些坑一定要注意了原创 2022-07-31 10:52:45 · 1499 阅读 · 0 评论 -
React.memo和useMemo的区别及使用
发现问题大家在使用hook进行开发的时候有没有遇到过以下的情况:当我set某一个值的时候,有好多不相关的值都重新进行了计算,当代码量较小的时候可能不明显,但是长此以往会让页面越来越卡。父组件的某个值更新了,但是某些并没有引用这个值的子组件竟然也更新了。以上的两种情况如果一直放任不管的话,随着代码的累计,页面的性能就会越来越差。当用class组件的时候我们可以通过PureComponent或者生命周期中的shouldComponentUpdate方法来进行优化,但是对于hooks要怎么做呢?ho原创 2022-01-27 18:55:03 · 7483 阅读 · 0 评论 -
React Hooks中如何获取上一轮的state
在最近的项目开发当中遇到了一个问题,就是我需要根据上一轮的state进行一些业务处理,如果是在class中这个很好实现,但是在hooks中该怎么获取呢。最终我在React的官方文档中找到了对应的答案。我们可以通过ref来保存上一轮获取到的state,代码如下function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { pr原创 2021-08-26 17:31:09 · 2104 阅读 · 0 评论 -
关于antd中可编辑单元格的另一种思路
一些题外话我最近有快2个月没有更新博客了,不是我已经忘记了这件事,一个原因是最近一直没有遇到什么值得记录的问题以及知识点。如果要硬写也不是写不出来,毕竟自己每天也有看别人的博客或者知识点。只是我认为这些东西就算写出来80%也是搬运别人的,没有太大的意义。另外一个原因是我的小闺女刚出生,事情有点多。进入正题因为新的需求中需要用到可编辑单元格的表格,所以就阅读的antd的文档看有没有合理的实现方案。对于antd中的Table组件大家应该都不陌生,功能非常齐全且强大,使用起来也比较简单。其中就有一个例子是原创 2021-08-11 17:56:41 · 922 阅读 · 0 评论 -
react-intl国际化踩坑记录
最近的项目中有国际化的需求,经过调研之后决定使用react-intl进行。特地记录一下开发中需要注意的点及踩过的坑。1.在class组件中如何使用以及ts类型的声明通常在函数组件中我们直接通过useIntl这个钩子函数来使用,但是在class组件中是没法使用钩子函数的。这个时候就需要用到react-intl提供的另外一个方法injectIntl。具体使用方法如下// 定义的props要继承react-intl的WrappedComponentPropsinterface ICommonDia原创 2021-04-13 18:18:26 · 1904 阅读 · 0 评论 -
react hooks中resize事件无法访问到最新的state的问题
最近在开发中遇到了一个比较神奇的问题:const [showTime, setShowTime] = useState(false);...// 调整chart的宽高const resizeChart = () => { if (!graphInstance || graphInstance.get('destroyed')) return; if (!chartRef.current) return; const width = chartRef.current.cli原创 2021-01-08 16:20:55 · 1503 阅读 · 0 评论 -
react-router在ts中的声明使用
当我们使用react-router进行路由跳转的时候,我们通常都会传递一些参数例如:param,state,query(目前已经被废弃),但是结合typescript使用时,我们需要声明组件的props类型,否则的话我们的tslint就会阻止程序的继续运行,接下来我就介绍一下在react中组件的ts声明:class组件:import React from 'react';import { RouteComponentProps, StaticContext } from 'react-route原创 2021-01-07 16:29:07 · 3344 阅读 · 1 评论 -
React Hooks实战中useEffect踩坑记录
最近一直在看ReactHook的相关知识,奈何没有实际的项目开发,于是乎上周新来的需求就决定用Hook来做,特此记录一下开发中遇到的一个印象比较深刻的问题:使用useEffectt进行性能优化时出现无限运行的情况:出现这个问题的原因是因为useEffect的第二个参数数组中的值为对象或者数组:React中判断是否需要执行useEffect内代码是通过Object.is进行判断的,...原创 2020-04-08 17:43:11 · 8653 阅读 · 0 评论 -
React之Refs&DOM
因为前两个月的新冠疫情公司的开工时间都有延迟,在家里待着蹭吃蹭喝逐渐忘记自己还是一个IT从业人员,复工之后才逐渐回神,想起自己还有博客。哈哈哈最近开发时遇到了关于ref的使用,看了文档之后了解到refs的使用在16.3版本之后已经出现了变更,就此记录一下16.3之后版本的Ref推荐用法(React.createRef()):1.简单使用:// 代码引入了typeScript//...原创 2020-03-11 18:53:29 · 560 阅读 · 0 评论 -
学习React Hook后的一些理解
第一次接触React Hook是在9月份的一次面试中,当时面试官问我你知道Hook吗?我当时就是???(大家自行脑补表情包)后来着急找工作,入职后刚开始也比较忙,渐渐都快忘记了这个事了。以至于React中文版中加了Hook之后一段时间我才看这个。下面记录一些看了官方文档自己的一些记录及见解:stateHook: 在没有hook之前 无状态组件就是指函数组件,但是有了ho...原创 2019-12-17 18:56:13 · 296 阅读 · 0 评论 -
关于react中setState的异步及同步
容我先记录一些开发中遇到的有趣的东西(O(∩_∩)O):console.log(typeof ('' || null));console.log(typeof (null || ''));console.log(typeof (null && ''));console.log(typeof ('' && null));// 这个需要对逻辑运算符有一定的...原创 2019-12-03 18:39:23 · 263 阅读 · 0 评论 -
antd-Pro利用fileReader()在前端读取文件内容
前几天在开发中遇到了一个问题,需要通过前端读取文件中的内容,并且显示在文本框内,查询资料后整合的解决方法如下:getTextInfo=(file)=>{ const reader=new FileReader(); reader.readAsText(file); reader.onload=(result)=>{ let targetNu...原创 2019-01-08 17:45:17 · 4889 阅读 · 0 评论 -
在react-antd中实现拖放效果
过年回来就没有做过博客了,年初公司的事情有点多,耽误了。进入正题:最近的项目中涉及到了拖放的问题,特地记录一下:这个其实和js原生的拖放基本一致1.在需要拖动的元素上:<Tag draggable={true} onDragStart={(e)=>this.tragStart(e,别的参数)} closable onClose={e=>this.d...原创 2019-03-22 18:25:05 · 8260 阅读 · 2 评论 -
关于react下手动判断是否需要刷新页面的方法
最近在开发的过程中遇到了一个问题:使用了echarts的路径图后,定时修改别的状态,不论状态和前一个是否一致,页面总是会刷新,然后图表也会一闪一闪的,感觉很难受,特意寻找了解决的办法,记录一下:react中有一个生命周期方法:shouldComponentUpdate(nextProp,nextState),这个方法如果返回false的话就会阻止页面的更新,通过分别比对props和state的...原创 2019-06-26 17:22:52 · 3463 阅读 · 0 评论 -
记录一个自己写的用于验证表单数据的方法
在一个开发项目中表单的提交没有用到网上的插件或者组件,所以的话就想写一个用于验证的公共方法,以后也可以复用:/** * 进行表单的基本验证 * @param {IRule[]} rules 验证的规则数组 * @param {IValues} values 表单数据对象 */export interface IRule{ name: string; type: s...原创 2019-11-20 11:24:32 · 207 阅读 · 0 评论