1. 简介

  使用代码版本 6.9.11 , git : git@github.com:bokuweb/re-resizable.git

2. Resizable 组件内容

 使用 enable 属性控制每个方向是否需要绘制 Resizer

 Resizer：控制当前方向上的鼠标事件 ， 然后在鼠标事件内计算新的 width 和 height 设置 Wrapper div的 style 属性，达到调整 width 和 height 的功能

  

render 代码

renderSizer 代码

3. 代码分析

 1. 在 Resizer 组件内监听 mouseDown 和 touchdown 事件 ，触发 外层 组件 onResizeStart 事件

2. onResizeStart 方法会执行绑定 mouseUp 和 touchUp 事件，以及 保存开始拖拽 ，计算 比例 等 开始拖拽的一些数据

3. 此时绑定的新的 mouseMove 会执行，根据一些限制条件 比如 min 和 max 的width 和 height 计算出 最后拖拽的 width 和 height 设置给 state ，组件会重新render

4. 重新render的时候会将width 和 heigth 设置给 Wrapper（默认是div）

5. 鼠标up的时候，会解绑 鼠标事件 ，设置拖拽结束属性。所以mouch和 touch 事件是在每次 执行拖拽的时候绑定的，在结束拖拽的时候会解绑

如果设置了props的 size 属性会覆盖 计算得到的 width 和 height