【React-rnd深度解析】- 01 看看核心逻辑

🔍 深度解析 react-rnd 源码

源码地址：https://github.com/bokuweb/react-rnd
核心依赖：react, react-draggable, re-resizable

---

🏗️ 1. 组件结构总览

react-rnd 是对两个成熟库的组合封装：

• ✅ react-draggable：处理拖拽行为
• ✅ re-resizable：处理缩放行为

内部结构如下：

<Rnd>└── <Resizable> （来自 re-resizable）└── <DraggableCore>（来自 react-draggable）└── <div className="rnd-content">...</div>

这就是你在 DOM 中看到的结构。Rnd 只是一个壳，核心逻辑全在这两个库中。

---

⚙️ 2. Rnd 核心 props 说明

💡 关键受控参数

prop	说明
position	拖拽位置（受控）
default	初始位置和尺寸（非受控）
size	尺寸（受控）
bounds	拖拽范围限制（字符串或 DOM 元素）
onDragStop	拖拽结束回调（给出 x/y）
onResizeStop	缩放结束回调（给出 w/h）

---

🧠 3. 源码入口分析

源码主文件位于：
📁 src/index.tsx

export class Rnd extends React.PureComponent<RndProps, RndState> {resizable: Resizabl