react从入门到放弃
文章平均质量分 85
大鱼吃小鱼7
一个会撸代码的小鱼姑娘,爱撸码,爱旅游,爱写作.
展开
-
关于React setState的实现原理(一).md
前言首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗?class Root extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMou...原创 2018-07-05 10:15:20 · 706 阅读 · 0 评论 -
在dom元素中使用refs详解
React高级指南--引用Refs和DOM 引用Refs提供了一个访问render()方法DOM节点或者React元素的方法。典型的React数据流中,props是双亲组件和子组件交互的唯一手段。要修改一个子组件,你需要使用新的props重新渲染它。然而,确实存在少数一些情况你需要命令性地(imperatively...转载 2018-11-16 14:05:43 · 866 阅读 · 0 评论 -
在react中使用管理状态工具mobx 入门案例
redux和mobx都是react比较热门的状态管理工具, 关于两者的差异, 在文章末尾会有介绍。一、工作流图先引用一张图解释一下mobx的工作流程:在mobx中, 数据是通过加 @observable 作为可监测的被观察者, 在view层中, 你可以通过添加@observer 将view作为观察者,对数据进行监测, 如果要触发改变数据,则使用@action, 事实上,你可以直接在view...原创 2018-11-15 20:02:48 · 3060 阅读 · 0 评论 -
移除vscode装饰器报错
不知各位有没有在使用vscode 写mobx+react的时候,遇到过 experimentalDecorators warning?问题截图当我在vscode新创建一个react+mobx项目的时候,遇到了下面这个警告。Experimental support for decorators is a feature that is subject to change in a futu...转载 2018-11-13 10:26:52 · 1228 阅读 · 0 评论 -
使用react做管理后台项目遇到的问题和难点
使用react做管理后台项目, 一点点感悟与问题1.全选翻页问题场景描述: 对一个table列表数据进行操作, 将选中的数据加到另一个列表中, 并可以对源列表进行全选和查询操作.问题描述:当使用全选功能, 对数据进行翻页, 会导致原来选中的数据被清空, 原因是antd的全选按钮, 只选择到了当前页的数据, 当切换之后又是另一页数据了.解决方案一: 将列表数据变成二维数组, 实现多页操作, ...原创 2018-10-30 16:15:11 · 13846 阅读 · 0 评论 -
antd的tree树形组件异步加载数据小案例
前不久,做业务需求时遇到一个树形选择的 问题 , 子节点的数据要通过点击展开才去加载,在antd给出的官方文档中也有关于动态加载数据的demo,然而不够详细,自己研究之后,整理出来共享给大家借鉴下。view.jsx(纯函数式声明)// 渲染树的方法const loop = data => data.map((item) => { const index = item.r...原创 2018-10-30 16:12:04 · 25853 阅读 · 1 评论 -
react中的组件之间的传值
目录一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件之间传值组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在一一来介绍一下.一.父组件向子组件传值 父组件通过state向子组件传值,// 父组件constructor(props){super(props);...原创 2018-07-02 17:23:00 · 2403 阅读 · 0 评论 -
react的状态提升
1.概念理解 在react中是单向数据流的设计, 即 只有父组件可以传递数据给子组件,而没有子组件传递数据给父组件的概念. 以正确的技术说明,是 拥有者组件 可以设置 被拥有者组件 中的资料,也就是主人与仆人的关系。那么子组件要传递数据给父组件该如何沟通呢?换句话说就是, react 如何将子组件的值暴露让父组件获取到?可以采用一种迂回的方法, 在父组件中设置一个方法(函数), 将其...原创 2018-07-05 11:11:34 · 940 阅读 · 0 评论 -
关于React setState的实现原理(三)
上一篇文章中提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行performUpdateIfNecessary方法,该方法代码如下:performUpdateIfNecessary: function (transaction) { if (this....原创 2018-07-05 10:44:43 · 837 阅读 · 0 评论 -
关于React setState的实现原理(二).md
上一篇文章中,写到了关于Batch Update的实现,有不懂的童鞋可以回头看看 上一篇文章 React中的Transaction 大家学过sql server的都知道我们可以批量处理sql语句,原理其实都是基于上一篇我们说的Datch Update机制。当所有的操作均执行成功,才会执行修改操作;若有一个操作失败,则执行rollback(回滚)。在React中,我们介绍过事件会在函数前后执...原创 2018-07-05 10:30:22 · 172 阅读 · 0 评论 -
在react中使用getBoundingClientRect获取某个元素的相关位置
getBoundingClientRect的用法MDNgetBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法:这个方法没有参数。rectObject = object.getBoundingClientRect();2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( ...原创 2018-11-16 17:33:06 · 5979 阅读 · 0 评论