react画廊应用的结构

页面结构
main中包含 图片展示区div，图片控制按钮区域nav
展示区内figure元素，其中包含图片img，图片标题figurecaption，图片背面div
控制区域是一系列的span元素

react组件名称
AppComponent：最外层组件，控制整个应用的数据
ImageFigure：所有图片的集合
ControllerUnit：控制按钮的集合

主要思路：
每次点击一个figure
如果他位于中间，则翻转，此时触发从大管家传递下来的inverse方法（通过bind方法来强制绑定该函数中的this指向大管家），传入图片索引，修改大管家的state，触发组件重新渲染

如果是四周的图片，则把该图片移动到中间，此时触发从大管家传递下来的center方法（同样是有bind的），传入索引，修改大管家的state，触发组件重新渲染

动画都由css来实现，为figure添加css样式即可实现动画过渡
图片大小240*240
性能记录：
100张图：初次渲染，cpu占用,40%，图片重排掉帧严重，图片旋转也有掉帧，频繁点击四周图片，cpu占用50%，同样也是很卡
50张图：初次：cpu30%多，重排掉帧，旋转不掉帧，频繁点击四周，cpu占36%
25张：初次23，重排不掉帧，旋转也不掉，频繁点击cpu22%，可以的
疑问，为何100张图的时候，图片旋转也掉帧呢？不是只操纵了一个节点而已吗？