严新巧　白俊峰

摘要：React组件化思想为开发者前端开发提供了新的思路，由于React的Visual Dom让开发者不用担心刷新页面带来渲染方面性能问题，而Visual Dom的核心算法就是React Diff算法，它确保只对界面上需要刷新的部分进行刷新，让开发者只需关注于业务本身。該文基于对React Diff算法的研究来分析React组件的生命周期，理解Virtual Dom的核心算法，方便以后React程序优化。

关键词：React组件；虚拟Dom算法；渲染

中图分类号：TP312 文献标识码：A 文章编号：1009-3044（2017）18-0076-03

1背景介绍

对于动态网站，需要经常对网页的元素进行操作，一般通过Dom树结点的操作来更新界面，对于一些比较复杂的界面，需频繁操作Dom结点会导致性能问题，并且对开发者而言，增加了开发的难度。基于此，React专门实现了一套Visual Dom机制。基于React开发程序的操作都是通过内置的Visual Dom来实现，当有数据状态发生改变时，会将前后两个Dom树进行对比，对比后的结果只对有区别的部分进行更新。基于一些策略，React能更好地处理Dom树发生改变的部分。

Visual Dom的核心算法就是React Diff，它通过算法的优化，让Dom树的更新不再是难题，这也让开发者不用担心由于Dom结点更新而导致的性能问题，通过计算出每次更新的Dom结点，只需要对局部进行操作就可以渲染出界面，这样保证了更新的效率。

2传统的Diff算法与Virtual Dom算法介绍

传统web应用，一般是直接更新DOM操作，但是DOM更新通常比较昂贵。React为尽可能减少对DOM的操作，提供一种不同且强大的方式来更新DOM，从而代替直接DOM操作。Vir-tual DOM，一个轻量级虚拟的DOM，是React抽象出来的一个对象，描述DOM的样子，以及如何呈现。……