React 中，用到的几种浅比较方式及其比较成本科普

开发中的绝大多数时候，我们并不需要关注 React 项目的性能问题。虽然我们在前面几个章节中，也花了几篇文章来分析如何优化 React 的性能体验，但是这些知识点在开发过程中能用到的机会其实比较少。面试的时候用得比较多。

但是，当你的项目遇到性能瓶颈，如何优化性能就变得非常重要。当然，我们前面几篇文章已经把性能优化的方式和方法说得非常清晰了，大家可以回顾一下。这篇文章我们要分享的重点是，当我采用不同的方式优化之后，代码逻辑执行所要付出的代价到底如何。

例如，当我们得知 React 的 DIFF 是全量比较的时候，可能第一个反应就是觉得他性能差。但是具体性能差到什么程度呢？有没有一个具体的数据来支撑？不确定，这只是一种主观感受。优化之后的性能到底强不强呢，也不敢肯定。

因此，这篇文章主要给大家介绍几种 react 在 diff 过程中用到的比较方式，以及当这几种方式大量执行时，执行所要花费的时间。

一、对象直接比较

又称为全等比较，这是一种成本最低的比较方式。在 React 中，state 与 props 的比较都会用到这样的方式。

var prevProps = {}
var nextProps = {}

if (prevProps === nextProps) {
  ...
}

那么，这种比较方式的成本有多低呢？我们来写一个循环简单验证一下。分别看看比较一万次需要多长时间。

var markTime = performance.now()

var prev = {}

var next = {}

for(var i = 0; i