React拖拽式组件DragactV0.1.7：手把手教你优化React组件的性能和手感做了一系列的性能优化，但是面对海量数据还是有难度。让我们看看之前的Dragact的优化。有314个方格垂直堆叠，插入时有明显滞后。1秒左右的延迟也垂直堆叠了314个方格，插入时的卡顿明显减少。实际制作过程中可能没有那么多对象，这是可以接受的。Blocks，以我们项目的dashboard为例，整个屏幕最多只有10个block，已经很了不起了。但是强迫症犯了，为了把性能做到极致，再次深度优化。React优化的策略是什么？策略一：shouldComponentUpdate()因为React的diff只是简单的深度优先+刷新策略diffhtml标签，所以React不会知道数据的变化。因此，开发者不得不自己去diff数据，而shouldComponentUpdate就是一个专门用于diff数据的生命周期函数。具体请看我之前的回答和徐飞大叔的回答：方正：Vue为什么没有shouldComponentUpdate的生命周期？徐飞：为什么Vue没有shouldComponentUpdate生命周期？策略二：利用内存功能缓存大量的计算结果很多时候，我们的遍历是不可避免的。React中最著名的性能问题是选择器问题。现在大家都知道reselect是用来做性能优化的，但是本质呢？下面写一段伪代码来演示一下：//首先，我们有一个斐波那契生成函数fib();//当用户要使用它的时候，这个函数就会被去掉constnumber=fib();//我们知道，fib()函数会经过大量的计算得到我们想要的结果//但是，除了第一次计算之外，后面的所有计算都是不必要的，因为我们一开始就已经得到了它的计算结果。//最好的方法是什么？Closure;constFib=function(){varcache=void666;returnfunction(){if(!cache){cache=fib();返回缓存；}返回缓存；}}();//当用户调用Fib时，只会计算第一次，后面的只会从缓存中取出。不要小看这种优化。很多时候，我们的反复遍历会导致性能低下。策略三：降低dom的深度我们都知道react每次更新都会进行diff。深度越大，差异层越多。降低diff级别是一个非常重要的性能优化手段，尤其是在数据量巨大的时候。具体怎么降低dom的深度，有很多方法，我用的方法是：renderchildren的方法。举个简单的例子，一个拖拽组件：
