React学习JSX与虚拟DOM

    最近开始了React的学习之旅，感觉这些框架都是一个套路。早先有学过VUE，它就像是在写模板，大部分是HTML。而React是在写模块，大部分是写js。

    React中有一个神奇的技术就是JSX，VUE2.0中引入也了React的JSX技术，但是React为什么要使用JSX技术呢？我们先来看官方的观点：

    JSX is not required to use React, but itmakes code more readable, and writing it feels like writing HTML.

    React并不是必须使用JSX，但是JSX可以增加代码的可读性，并且写起来就像写HTML一样。

JSX为什么可以增加代码的可读性呢?

      其实是这样的。React中有一个核心的机制，虚拟DOM。虚拟DOM是一个原生的JavaScript对象，并且具有真实DOM信息的一些属性。它在APP与DOM之间建立了一个抽象层，当数据和状态发生改变时，只需要在虚拟DOM上进行操作，最后再同步到真实的DOM中。由此可见，虚拟DOM可以减少直接操作DOM的次数，减少不必要的repaint和reflow，提高性能。

虚拟DOM是如何更新的呢？

    当状态和数据发生变化时，React会生成新的虚拟DOM树，然后将新的虚拟DOM树与旧虚拟DOM树进行对比，这用到了diff算法。diff算法的核心是对树进行分层比较，并且只对两棵树的同层进行比较。React会对新旧两棵树进行一个深度优先的遍历，每遍历到一个节点就把该节点和新的树进行对比。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个DOM树的比较。

图1

        如果节点发生了跨层移动，则被移动的节点会直接被销毁，并且会创建新节点挂载到，目标DOM上。由此可见，在编写代码是要加强DOM结构的稳定性，如果有必要更改，可以利用CSS来隐藏或显示某些节点，而不是真的移除或添加DOM节点。其实一旦接受了React的写法，就会发现前面所说的那种移动的写法几乎不会被考虑，这里可以说是React限制了某些写法，不过遵守这些实践确实会使得React有更好的渲染性能。

        在React源码中，diff算法的核心部分为_updateChildren方法，它是ReactMulti.js内部的一个方法。