当前位置: 首页 > 后端技术 > Node.js

React组件:拖拽布局Dragactv0.1.6发布

时间:2023-04-03 16:33:26 Node.js

仓库地址:Dragact流畅拖拽组件大家好,新的一年过去了,大家都忙于工作。由于我在国外,我根本没有休息。...废话少说,上周我陆续对Dragact组件做了一系列的更新,基本上是大重构,小部分性能优化。新特性一:性能提升通过React组件渲染优化和内部算法优化,节省了大量的遍历和渲染。可以看到优化前6s的表现。可以看到优化后6s的表现。它也运行了6s。我们的脚本计算时间、渲染时间、浏览器绘制时间都得到了很大的提升。新特性2:不同的widget渲染Api依赖注入widget(widget)从最简单的例子可以看出,我们渲染子组件的方式和以往有些不同。在过去,React组件的编写方式类似于以下:0

1
2
当然可以这样做,但是有几个问题:child组件很丑,我们需要很难定义很多东西来监听子组件的事件,比如是否拖拽等等,如果数据量很大,必须要写一个map函数用于数组,类似于:layout.map(item=>item);为了帮助Renderingarrays为了解决这个问题,我将子组件的渲染方法高度抽象成一个构造函数,简单来说就是下面的形式:{(item,isDragging)=>{return{isDragging?'Crawling':'Parked'}
}},现在,我们的子元素渲染就变成了一个小的构造函数,第一个入参是你输入数据的每一项,第二个参数是isDragging,状态监听参数这样做,实现简单,组件美观,不用写map函数,不用写key,更容易监听各个组件的拖动状态isDragging。更多依赖注入的思路和好处见我知乎问答:知乎,方正的回答:如何设计一个组件库,最后放一张图片GIF:很容易追踪是否拖放新特性3:拖动手柄通过新的API,现在dragact可以轻松实现完全自定义的拖动手柄,点击拖动手柄即可移动,无需点击?绝对不能动新特性4:数据驱动模式视图的变化就是数据的变化。这是来自React的灵感。Dragact组件通过对数据的处理实现数据的变化,即视图的变化。这样做的好处是我们可以很方便的把布局信息记录在服务器的数据库中,下次拿到数据的时候可以很方便的恢复原来的视图位置。通过获取Dragact组件的实例,我提供了一个apigetLayout():DragactLayout;获取当前布局信息。在本例:拖拽示例中,我们通过调用getLayout()api将数据存储在本地浏览器中,下次访问时,可以恢复之前放置的布局。新功能五:全新用例,支持移动端为了更好的观看体验,我为手机用户设计了用例页面,现在手机端也能玩了!手机示例:拖拽示例中的下个版本的手机界面:支持自动滚动。当鼠标拖到浏览器边缘时,视图可以自动滚动列表布局。现在是全球布局。下个版本会考虑新的列表Layout拖把的高街组件。目前,拖动手柄的实现有点痛苦。下个版本我会重点修改仓库地址:【Dragact的流畅拖拽组件感谢大家的支持,喜欢的话就给个小小的吧?!~