React在构建高性能前端应用时有哪些最佳实践？

本文共计4400个文字，预计阅读时间需要18分钟。

目录 + 正文 + 代码结构 + DndProvider + DragDropManager + useDrag + HTML5Backend + TouchBackend + 总结 + 正文 + React DnD 是一个专注于数据变更的 React 拖拽库，直观地将，你拖拽的是数据，而非页面视图。React。

目录

• 正文
• 代码结构
• DndProvider
• DragDropManager
• useDrag
• HTML5Backend
• TouchBackend
• 总结

正文

React DnD 是一个专注于数据变更的 React 拖拽库，通俗的将，你拖拽改变的不是页面视图，而是数据。React DnD 不提供炫酷的拖动体验，而是通过帮助我们管理拖拽中的数据变化，再由我们根据这些数据进行渲染。我们可能需要写额外的视图层来完成想要的效果，但是这种拖拽管理方式非常的通用，可以在任何场景下使用。初次使用可能感觉并不是那么方便，但是如果场景比较复杂，或者是需要高度定制，React DnD 一定是首选。

React DnD 的使用说明可以参见官方文档。本文分析 React DnD 的源码，更深层次的了解这个库。以下的代码来源于 react-dnd 14.0.4。

代码结构

React-DnD 是单个代码仓库，但是打了多个包。这种方式也表示了 React DnD 的三层结构。