位置: 编程技术 - 正文

再次谈论React.js实现原生js拖拽效果引起的一系列问题(react all in js)

编辑:rootadmin

推荐整理分享再次谈论React.js实现原生js拖拽效果引起的一系列问题(react all in js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react all in js,react to change,react all in js,react onchange,react all in js,react to changes,react at once,react at once,内容如对您有帮助,希望把文章链接给更多的朋友!

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

前几天写的那个拖拽,自己留下的疑问。。。这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分。。。就再聊聊拖拽吧

一、不要直接操作dom元素

react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用。即在MyFrom组件中获取,如下代码:

这样就可以直接在父组件中操作自己,而不是在子组件中调用。

二、onmousemove和onmouseup事件应该绑定到document上

拖拽事件中,当鼠标在DragArea中按下后,就应该检测鼠标在document中移动的距离及何时弹起。否则直接绑定在form的话会有一个不雅的地方,就是拖动条拖动边缘附近的时候,如果鼠标速度快一点会失效,鼠标再回来拖动条会自动吸上鼠标。因此利用react初始化阶段的componentDidMount函数,这个函数是组件被装载后才会被调用,也就是说调用这个方法的时候,组件已经被渲染到了页面上,这个时候可以修改DOM。也就是说此时把相应事件再绑定到document上面,如下代码:

再次谈论React.js实现原生js拖拽效果引起的一系列问题(react all in js)

这样就可以消除那个小小的bug啦!

三、增加边缘检测

一般情况下的拖拽,我们都是不希望能够拖出可视窗口之外的,因此这就需要检测。检测四个方向上的位置,即上、下、左、右。显然,上的距离top和左边left的距离必须要大于等于0,下边和右的距离必须要小于视口大小减去from本身的元素宽高。

具体代码:

PS:新的代码已经更新在我的github上面,大家可以研究一下。

ReactJS的背景和原理

在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

如果你像在年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

纯js+html和纯css+html制作手风琴效果 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较简单,主

基于javascript制作微博发布栏效果 本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下:1.判断IE的方法:直接用varie=!-[1,];即可2.连续发生事件的用法:IE下:触发对象.o

javascript事件委托的用法及其好处简析 本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果,好

标签: react all in js

本文链接地址:https://www.jiuchutong.com/biancheng/373378.html 转载请保留说明!

上一篇:深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解(json的parseobject)

下一篇:纯js+html和纯css+html制作手风琴效果(js 和html)

  • 稳岗补贴计入现金流量哪个科目
  • 赠送货物怎么入账
  • 不动产服务具体有哪些
  • 同一控制下资产收购
  • 计提车间折旧费怎么写分录
  • 建设工程项目融资
  • 两个公司成立一个新的公司注意事项
  • 评估费是必须花的吗
  • 委托、受托出口做账有哪些事项?
  • 企业取得的信托计划分红缴企业所得税吗
  • 堤围工程
  • 工地人为受伤一般怎么解决
  • 一般纳税人为其他公司制作标书怎么缴税?
  • 加盟费怎么算的
  • 代缴水电费是什么意思
  • 投资收益税前扣除标准
  • 涉农和中小企业贷款分类证明没有就不能进行税前扣除么
  • 申报是不是就是报税
  • 限售股转让所得
  • 跨年度多计提的印花税怎么冲回
  • 专票私人能开吗?
  • 个税起征点是
  • 工商年报的纳税总额怎么填写
  • 财务考核指标表
  • 其他综合收益怎么来的
  • 新建厂房环评流程
  • mac桌面的文件夹怎么换到别的地方
  • linux管理员账户名
  • win10任务栏搜索如何关闭
  • ati2sgag.exe进程安全吗 ati2sgag进程信息查询
  • 高德地图海量点图层刷新
  • 实际缴纳消费税计算公式
  • 达特穆尔动物园
  • php 字符串处理函数
  • 网上蛋糕商城jsp页面
  • python的Django框架
  • get请求与post
  • python编程100例
  • 中药饮片盘点误差范围
  • 新开办公司如何办理金税盘
  • mongodb morphia
  • 安装使用漏电保护器是属于哪种安全措施
  • 购固定资产怎么入账
  • 赡养老人专项附加扣除的标准
  • 本月盈利本年亏损要做分录吗
  • 其他债权投资计提减值影响所有者权益吗
  • 股权收购协议书实际案例
  • 机动车临时号牌怎么贴
  • 增值税劳务费税率是多少
  • 未开票收入转为开票收入
  • 以物易物是什么时代
  • 出差费计入工资总额吗
  • 提前还贷款计算机
  • 预收账款余额在贷方是什么意思
  • 本票丢了别人可以取钱吗
  • 计提折旧对公司有什么好处
  • 旅游饮食服务企业的特点包括
  • sql语句的查询语句
  • SQLSERVER Pager store procedure分页存储过程
  • mysql count详解及函数实例代码
  • 64位win7怎么释放为硬件保留的内存?
  • 在windows中用于显示正在运行的程序名称的栏称为
  • win10预览版和正式版
  • linux命令date
  • 怎么删除隐藏文件夹win 10
  • win7系统点击计算机图标未响应
  • windows8怎么使用
  • 电脑开启虚拟wifi
  • 2016年首个国家安全教育日
  • cocos2dx在不同安卓机型下scrollview裁剪失败
  • 前端防止sql注入
  • unity ulua
  • androidui布局
  • python 执行远程代码
  • node解决跨域
  • 安卓解析工具
  • 封装好的中药能带上飞机吗
  • 怎么用python做爬虫
  • 返利是否合法
  • 残疾人就业税收优惠政策2021
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设