React学习(五)：动画与拖放

一  React动画

1. ReactCSSTransitionGroup

ReactCSSTransitionGroup元素必须包装在你需要实现动画效果的子元素外，它可以接收三个属性，transitionName(映射到css中包含实际动画定义的类名),transitionEnterTimeout, transitionLeaveTimeout (定义了动画的持续时间)。

若设定动画名称为example，则在每次需要产生动画的状态改变时（增加），react会使用额外的className:example-enter来渲染条目，在浏览器下一个tick中，react会附加一个className:example-enter-active。然后再经过了transitionEnterTimeout定义的时间后，两个类都会被移除。当删除状态下，也是一样的会添加example-leave和example-leave-active。

初始组件挂载时也可以设置动画：transitionAppear设为true，再设定transitionAppearTimeout，然后设置对应的css即可。

二 React拖放

不同的厂商对于拖放的API的实现略有不同，而且移动设备依然不支持拖放，我们将使用React DnD这样一个拖放库，进行开发，它会使用浏览器开放的API，处理各个厂商的不一致性和怪异性，使用的好处是不需要涉及DOM，拥抱单向数据流，使用纯数据方式来定义拖放源和放置目标的逻辑。

1.React DnD的实现

React DnD库提供了三个高阶组件，它们必须应用到你应用程序的不同组件中，这三个高阶组件是：DragSource,DropTarget,DragDropContext。DragSource会使组件变成一个可拖拽元素，DropTarget会使组件有能力处理拖放到内部的元素，而DragDropContext封装了发生拖放交互行为的父元素。

2.DragDropContext

DragDropContext需放在拖放发生的container组件中，而导出时，不是直接导出Container组件，而是在其基础上导出一个高阶组件，其中注入了与拖放有关的状态和函数。在此可以导出HTML5后端，也可以支持不同的后端，如：

export default DragDropContext (HTML5Backend) (container);

3.DragSource 与 DropTarget

使用它们来创建高阶组件，需要提供三个参数：type，spec，collect函数。

1.type

这个参数指定了组件的名称，由于可能出现不同的拖拽源与放置处，故而有个特定的标示是十分重要的，这里要注意的是当DragSource,DropTarget的type相同时，可发生拖放行为。

2.spec对象

spec描述了增强组件是如何响应拖拽和放置事件的，它包含了若干函数，会在拖放交互时被调用，如beginDrag，endDrag，canDrop，drop等。

3.collect函数

collect函数用来控制那些属性需要进行注入以及如何注入，会传入两个参数，connector和monitor。

connector参数必须映射为一个属性，会在组件渲染时用于界定DOM的范围。

monitor允许你把拖放状态映射为属性，用之可以创建如isDragging或者canDrop的属性。

4.总结

渲染出的拖放部分的div需分别放在DragSource(),DropTarget()中，然后分别设置spec对象，collect函数等，设置不同情形下的样式，在导出时需要导出高级组件，并标明上述三个参数。