react-beautiful-dnd 是小编最为关注的 dnd 组件库,它于 2018 年 7月 3 日发布了 v8.0.0 版本,带来了一些优秀的设计和优化。
23% 的性能提升
通过减少 DOM 的读取、更加靠近内部状态机、拖拽组件在鼠标事件中避免二次刷新、检查和移除大量记忆层来提升了拖拽的性能。
18% 的体积缩减
产品从 38kb 减少到 31kb,主要手段有代码重构、移除 reselect 和 redux-thunk 依赖库,使用 babel 7,生产环境移除 debug 代码等。
开发提示
灵感来源于 React,通过引入一系列 warning 信息提示帮助开发者合理使用 react-beautiful-dnd 组件。
增强错误恢复能力
如果 react-beautiful-dnd 组件内部发生错误,它尽力清除现有拖拽、释放 hooks 函数来恢复组件,同时也会在控制台打印 debug 信息。
DraggableStateSnapshot
在 DraggableStateSnapshot 中增加 isDropAnimating 属性,配合 isDragging 的使用,可以在你正在放下元素时添加一些样式,这个属性确实解决了特定场景的样式要求。
样式精简
移除拖动元素样式:“margin:0” 的设定,让它变得更加简洁。
领取专属 10元无门槛券
私享最新 技术干货