react
何其涛
我的qq:459069283 有什么问题可以加我,一起讨论学习!
展开
-
redux-saga中 take,takeEvery,takeLatest区别,自己的直白理解
redux-saga中 take,takeEvery,takeLatest区别,自己的直白理解redux-saga 的时候,对于take,takeEvery,takeLatest的区别比较迷惑,官方的解释很难理解,然后自己通过写了例子和看了一些解释,下面写一下我的直白理解先看看官方文档对于take,takeEvery区别的解释在 takeEvery 的情况中,被调用的任务无法控制何时被...原创 2018-11-14 22:44:47 · 15668 阅读 · 1 评论 -
React接收excel文件下载导出功能封装
React接收excel文件下载导出功能封装因为最近项目又需求要导出excel,所以封装了这部分的功能,对fetch的封装做了修改,使之后的调用导出功能更为方便首先这个项目请求是对fetch进行过封装的 ,如果对fetch有了解的话,我们知道fetch种response返回的是一个实现了Body接口的对象, 所以可以使用Body接口中的方法 json()处理json,blob ()处理成...原创 2019-04-25 15:47:09 · 3315 阅读 · 1 评论 -
React中Suspense及lazy()懒加载及代码分割原理和使用的理解
React Suspense lazy() 懒加载 代码分割 code splitingSuspense和lazy()都是react中比较新的特性,在项目中使用还比较少,但是学习一下有助于在后面的项目中使用,同样可以一窥React未来的发展方向React.lazy()概括顾名思义lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入为什么需要懒加载在React的项目中...原创 2019-04-03 17:00:49 · 12593 阅读 · 0 评论 -
React的onPaste必须点击一次元素才能起作用问题
React的onPaste必须点击一次元素才能起作用问题最近在封装一个图片组件的过程中,有一个需求是需要能够复制粘贴上传图片, 因为React中有自带的合成事件onPaste绑定事件,但是出现一个问题是, 鼠标直接放在上面,并不能触发onPaste事件 .使用了各种方法都不行 handlePaste = (e)=> { console.log(e) } ....原创 2019-04-10 19:33:40 · 1383 阅读 · 1 评论 -
React Component vs PureComponent/memo的理解以及性能优化
Component vs PureComponent的理解以及性能优化因为现在很多组件常继承PureComponent,虽然两者都可以用来继承一个组件类但是,他们之间是有区别的,PureComponent是对Component的性能优化,下面就来详细写下为什么Component比较两者之前我们要先了解两者的渲染时机,Component在 state改变,props改变,调用this.s...原创 2019-03-22 17:40:33 · 999 阅读 · 0 评论 -
ant design中 Select/Dropdown/DatePicker/TimePicker放在Modal中时,不更随model滚动
在使用ant design过程中发现,当再Modal中使用时,浮动的下拉菜单时间选择菜单等不随Modal的滚动而一起滚动,有时候会被部分遮挡.这是因为浮动层都是默认以body定位的,而Modal层滚动的时候body整体页面并没有滚动,所以导致浮动层不会跟随滚动. 解决方法就是使用Select中的getPopupContainer和DatePicker中的getCalendarContainer属...原创 2019-03-19 15:51:03 · 2003 阅读 · 0 评论 -
ant design/react 利用setTimeout解决表单还未加载,动态校验的问题
ant design/react 利用setTimeout解决表单还未加载,动态校验的问题在写项目中出现一个问题,在表单中用一个A控件控制另一个B控件显示隐藏,当A控件切换的时候,同时校验B控件,这时候会出现B控件内就算有初始值也会检验报错, 因为当校验代码执行的时候,B控件还没有加载出来,因为两个操作都在同一个eventloop里.handleVisible() { this.set...原创 2019-03-05 18:59:32 · 1468 阅读 · 0 评论 -
ant design表单校验踩坑
antd的表单校验有很多预设规则,类型如下string: Must be of type string. This is the default type.number: Must be of type number.boolean: Must be of type boolean.method: Must be of type function.regexp: Must be an ...原创 2019-02-18 20:00:56 · 7549 阅读 · 2 评论 -
ant design中Select,Option动态加载,设置初始值无法默认选中项问题
一般遇到表单回显的问题的时候,会使用initialValue设置初始值 {form.getFieldDecorator('name', {initialValue:current.name})(<Input placeholder="请输入姓名" />)}但是发现动态加载的Option选项的Select,无法选中指定项,而是直接显示绑定的值,检测得到Option中的key必须是...原创 2019-02-27 17:37:23 · 13380 阅读 · 13 评论 -
dva中effect内调用另一个effect的,实现put阻塞式调用的方法
dva中effect内调用另一个effect的,实现put阻塞式调用的方法在项目中通常会有在一个effect中调用另一个effect的需求,实现方法就是直接使用put *a({ payload}, {put, call,take}) { try { console.log(a) yield put({type: 'b',payload: {}}...原创 2019-02-21 20:25:47 · 16351 阅读 · 1 评论 -
ant design 表单数字校验失效问题
ant design 表单数字校验失效问题ant design 的表单字段校验有很多细致得了类型校验, 就是用rule内的type属性设置的其中的值有:string: Must be of type string. This is the default type.number: Must be of type number.boolean: Must be of type boolea...原创 2019-01-21 20:30:30 · 7059 阅读 · 3 评论 -
ant design pro 修改request请求方法,修改为符合实际业务接口请求的数据处理方式
ant design pro 修改request请求方法,修改为符合实际业务接口请求的数据处理方式ant design pro中对fetch进行了封装处理,写在utils/request.js,但是与我们通常的接口格式的处理并不适配,我们业务出现的错误代码并不会直接放在网络层,而是放在json中,所以需要做一些修改原本写法在ant design pro的项目中,原本的请求处理中可以看出,...原创 2019-01-14 20:00:41 · 20667 阅读 · 4 评论 -
antd-pro 配置请求代理
antd-pro 配置请求代理新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑antd-pro中用的是fetch来实现http请求,封装成功一个request方法,在本地联调的时候需要该代理,通过本地服务器来请求后端服务,在部署到线上时需要使用nginx做反向代理需要在config/config.js 添加下面代码proxy: { '/api/': { ...原创 2019-01-07 20:22:17 · 12523 阅读 · 7 评论 -
dva umi roadhog区别和个人理解
dva umi roadhog区别和个人理解因为最近再写react的项目 ,所以这三个都有学习,因为都属于阿里系的技术栈而且都是用于react项目搭建的,通常是组合在一起的。roadhog关于roadhog的介绍好像唯一的介绍文章的就是github上作者写的一篇介绍文章链接因为roadhog本来就很简单,只有三个命令server(启动服务),build(构建项目),test(测试)。...原创 2018-12-04 18:52:32 · 5243 阅读 · 0 评论 -
对于redux-saga中 actionChannel 缓存器的个人理解
对于redux-saga中 actionChannel 缓存器的个人理解官方对于actionChannel 的解释和例子都比较奇怪,很容易让人误以为actionChannel 的作用是阻塞流程,让action可以一个一个的处理。其实并不是这样理解的。actionChannelactionChannel 的作用更像是为了防止在阻塞过程中导致中间的的action被忽略,所以要创建一个缓存器,...原创 2018-11-14 23:00:09 · 887 阅读 · 0 评论 -
react Context/Provider/Consumer传参使用
react Context/Provider/Consumer传参使用react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用Context作用上下文(Context) 提供了一种通过...原创 2019-08-06 11:49:51 · 6423 阅读 · 0 评论