react-虚拟dom与diff算法

Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。

一、dom树的层级对比

传统：

找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题. 因为需要不同的层级。

Facebook算法：

React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度.

把树按照层级分解

只对比当前这一层级dom节点的区分，不再查找其他层级dom树的区别

二、列表对比

Facebook算法：

列表比较，写一个 key 属性帮助 React 来处理它们之间的对应关系.实际中, 在子元素中找到唯一的 key 通常很容易.

能有效提升整个页面的渲染速度，提升整个性能的加载

三、Components对比

Facebook算法：

Components比较，React app 通常由用户定义的 component 组合而成,通常结果是一个主要是很多 div 组成的树.这个信息也被 React 的 diff 算法考虑进去, React 只会匹配相同类型(ES6 class)的 component.

组件的命名都是唯一的，一个组件就是一个对象，不会存在重复的问题，当前后组件不一致时能立马找到

四、合并操作

Facebook算法：

合并操作，当调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

五、选择性子树渲染

Facebook算法：

选择性子树渲染，在组件上实现下面的方法

boolean shouldComponentUpdate(object nextProps, object nextState)

根据 component 的前一个和下一个 props/state,你可以告诉 React 这个 component 没有更新, 也不需要重新绘制.实现得好的话, 可以带来巨大的性能提升.

return false/ture

可以选择什么情况下让视图更新，什么时候不让视图更新