位置: 编程技术 - 正文

再次谈论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)

  • 销售不动产营业税纳税义务发生时间
  • 短期借款的实际资金成本
  • 销售货物收入确认条件
  • 行政职工福利费包括哪些内容呢
  • 应付票据是资产吗
  • 红字信息表跨月撤销有什么影响吗
  • 处置固定资产增值税和所得税报税能一致吗
  • 有限合伙企业注册资金要求
  • 之前付过款回来收到发票应该怎么做凭证
  • 普通发票红字冲销发票怎么操作
  • 分期手术
  • 什么企业没有销售费用
  • 个人股东转让股权印花税税率
  • 银行汇票的概念
  • 年收入超过12万什么时候申报
  • 公司购入房产账务处理
  • 一般纳税人企业要交哪些税
  • 油票入什么管理费用科目
  • 6位开票代码是几位数
  • 建筑企业财务制度及规范流程
  • 资管产品增值税征收管理规定
  • 没有ca证书怎么办社保
  • 固定资产折旧金额影响因素
  • 收到退回所得税怎么做帐
  • 加速折旧法和直线折旧法的区别
  • 国外交工作的基本出发点和落脚点是
  • 初级考试判断题怎么扣分
  • 如何在旧的php系统中删除
  • mac底部菜单栏不见了快捷键
  • 多交的所得税退回来账务处理
  • pqtray.exe - pqtray 是什么进程 有什么用
  • 我告诉你win7旗舰版
  • 预收账款调增应纳税所得额
  • 没结婚生了小孩分手了怎么办?
  • 京东最贵的商品排行
  • 浏览器下载量排名第一的是
  • 微信php开发教程
  • 同业代付会计分录
  • 二手办公楼交易税多少
  • vue经典案例
  • 使用php连接数据的方法
  • 前端file对象
  • 小程序生命周期钩子
  • node express安装
  • 公允价值变动损益怎么算出来的
  • 开具红字发票资料清单
  • 企业购买期货
  • 个税申报本期收入是填应发还是实发
  • 请问在accessdemo1
  • sql2008用ip连接不了
  • 使用SQL语句创建一个名为:bookdb的数据库
  • 进仓费开票是几个点
  • 退货给谁
  • 预付款已经开了发票未到货要怎么做账
  • 餐饮行业纸巾入库流程
  • 飞机票没有发票只有行程单
  • 委托生产产品
  • 专项应付款贷方余额表示
  • 本年利润的会计科目代码
  • 研发支出资本化和费用化的区别
  • 交易性金融资产属于流动资产
  • 备品和备件的定义
  • 应收帐款 发票
  • mysql安装包和免安装的区别
  • 如何进行节约
  • winxp怎么装系统
  • Ubuntu 14.10 “Utopic Unicorn”正式发布(附下载)
  • pg环境变量
  • perl调试
  • 样式默认有几种修改格式
  • python class类型
  • python的for函数
  • 深圳地税电子税务局
  • 广州税务举报电话
  • 地税发票怎么开 步骤
  • 税务申报系统如何改成密码登录
  • 国家税务总局河北地税局
  • 遵从和尊重
  • 国税实名制信息采集
  • 从国外寄电吉他要多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设