React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

仓库地址：Dragact手感丝滑的拖拽布局组件

预览地址：支持手机端噢～

上回咱们说到，Dragact组件已经进行了一系列的性能优化，然而面对大量数据的时候，依旧比较吃力，让咱们来看看，优化以前的Dragact。

纵向堆叠着314个方块，插入时明显的卡顿，大约1秒的延迟

一样纵向堆叠着314个方块，插入时卡顿明显减小不少，能够接受

在实际生产过程当中，可能不会有那么多物块，就拿咱们项目的dashboard来讲，整个屏幕最多只有10个方块，就已是了不得了。

可是强迫症犯了，为了使得性能达到极致，再次进行了深度的优化。

React优化的策略有哪些呢？

策略一: shouldComponentUpdate()

由于React 的diff只是简单的深度优先+刷新策略去diff html tag，因此数据的改变，React是不会知道的。

所以，开发者必须得本身去diff数据，shouldComponentUpdate就是用来diff数据的一个特殊声明周期函数。

具体的，请看我以前的回答和徐飞叔的回答：

方正：Vue为何没有shouldComponentUpdate的生命周期？

徐飞：Vue为何没有shouldComponentUpdate的生命周期？

策略二：用记忆功能函数去缓存大量计算结果

有不少状况下，咱们的遍历是不可避免的。

React中最著名性能问题，就是selector问题，如今你们也都知道用reselect去作性能优化了，可是本质呢？

咱们写一点伪代码来作演示：

//首先，咱们有一个斐波那契生成函数  fib();
//用户想用的时候，就会去掉这个函数
const number = fib();


//咱们知道，fib()函数里面会通过大量的计算，才得出咱们想要的结果
//可是，除了第一次计算以外，以后的全部计算都是不须要的，由于咱们已经在一开始拿到结果了

//怎么作最好呢？闭包;

const Fib = function (){
   var cache = void 666;
   return function(){
      if(!cache){
          cache = fib();
          return cache;
       }
      return cache;
   }
}();

//当用户调用Fib的时候，只会在第一次进行计算，以后的后只会从cache中拿出来。

不要小看这种优化，不少时候，咱们大量重复的遍历就会致使性能的低下。

策略三：减小dom的深度

咱们都知道，每次react 更新的时候，都会进行diff，深度越大，diff的层次越多。

减小diff的层次是很是重要的性能优化手段，尤为是数据量巨大的时候。

具体怎么去减小dom的深度，方法有不少，我用的方法是：render children的办法。

简单的举个例子，拖拽组件：

<Dragger>
    <div>我是拖拽的组件</div>
</Dragger>

这样的一个设计，看似很简单，很明了。用Dragger组件去包囊咱们想要的组件，就可让其得到拖拽的属性。

这么作不是不行，可是不少时候咱们在设计之初，没考虑那么多，就会使用这样一种方式去设计：

class Dragger extends Component{
    moving(){}......

    render(){
      return (<div
         onMouseDown={...}
         onTouchDown={...} 
         style={....}
         >
         {this.props.children}
         </div>)
    }

}

是否是很常见？这么作的问题其实很明显，就是平白无故的，咱们多了一层div，组件一多，那么就多会了几层div，无疑形成了渲染压力。

使用render children，咱们能够这么设计

class Dragger extends Component{
    moving(){}......

    render(){
      const provided = {
       onMouseDown:this.onMouseDown
         onTouchDown:this.onTouchDown
         style:{....}
      }
      return this.props.children(provided);
    }
}

在外部使用的时候，就变成了：

<Dragger>
    {(provided)=><div {...provided}>我是拖拽的组件</div>}
</Dragger>

看似稍微蛋疼了一些，可是好处就是：减小了dom的层级。

还有更多好处，能够看以前的一篇文章：React组件：拖拽布局Dragact v0.1.6 发布

手感的优化

看似很标准，实际上用户须要拖动很远，才会物体进行交换

看似很标准，实际上用户须要拖动很远，才会物体进行交换，形成这样让人不适的感受缘由是由于计算时，我取的计算中心永远是物体的顶边。

因此，当物体向下滑动的时候，必需要物体的顶边到达下一个物块的中心才能发生交换。

上图咱们能够看到，长条的物块，已经拖出了屏幕很远，才会进行交换。

就这一点点差别，让我顿时感到不爽！

为了使得手感更加优异，作了大量实验之后，我发现，把移动中心设置在物体的重力中心，最为温馨。

把移动中心设置在物体的重力中心，最为温馨。

这一点点设计的改变，使得手感彻底不一样了。

你能够狠狠的点击：预览地址

到此，Dragact组件，不管从性能，仍是手感上来讲，都已经至关的符合咱们的需求了。

yeah~

各位，咱们下次见。