React--操作数组引起 state 状态变更未重新渲染解决方案

今天在编写react组件的工作中遇到了问题：
在state状态中存在这样一个数组arr，arr结构类似[{"src":".......","img":"......"}] 其中src是MP4格式的视频地址，img是视频的封面，主要需要完成的功能是对这样的数组进行排序和删除；然而在页面上操作排序的时候图片位置变换，而视频位置未动；state状态数据已变更
该问题解决过程记录：

1. 在编写react的过程中，习惯了setState()的即时渲染，如setState({foo:1})的写法。setState方法是异步的，当管理大量组件等情况时可能会导致页面渲染结束了，而state状态还未同步完成。

2. setState()方法可以传递第二个参数作为回调，回调中可以调用第一个参数中已经设置好的状态值如：

    this.state={foo:1};
   
    this.setState({foo:2},()=>{
   
       console.log(this.state.foo);//2
   
   });

   3.所以我将arr的值给一个变量arr1；再清空state状态的arr；在回调中操作arr1最后给state状态的arr数组保证页面能完成渲染

总结：
即时渲染在处理简单的数据结构时能够立即完成类页面同步渲染，然而当复杂的数据或者需要加载较大较多浏览器组件（如视频播放）时建议使用回调函数来确保页面同步渲染

（以上都是自己的个人看法，不一定正确，欢迎指正）

本作品采用《CC 协议》，转载必须注明作者和本文链接