React入门（一）

      之前在进行前端工作时，也做过几个使用React框架的前端项目，最近的毕业设计也是做了一个react框架的电子商务平台，答辩完后发现个人对于React还没有做一个总结，为了准备以后的面试，在最近几天慢慢的整理出来吧。

      首先是一些众所周知的背景说明：React 起源于 Facebook 的内部项目，因为该公司的一个小任性，不满意当时已有的所有 JavaScript MVC 框架，决定自己写一套，用来架设Instagram 的网站。做出来后发现还挺好用的，于是，react在2013年5月开源了。

      接下来是React的一些大体特性介绍。React相对于其他的框架，它跟Vue一样，有自己的一套路由机制来实现自己的单页面。说到单页面，就得附带的说下React的Virtual DOM（虚拟DOM树）。做过前端开发的人都知道，DOM操作是最昂贵的操作之一，在性能优化中，减少对DOM树的访问修改是很重要的一部分。怎么理解虚拟DOM呢：

       在HTML中存在 ---- <ul class="list">

                                            <li class="item">first</li>

                                            <li class="item">second</li>

                                       </ul>

<ul class="list">                                           <li class="item">first</li>                                     <li class="item">second</li>                                   </ul>

        将这个真实的DOM抽象为一个JavaScript的对象，即虚拟DOM，则我们可以把上面的真实DOM构造为：

                            var element = {

                                    element： 'ul',

                                    props: {

                                        className: 'list'

                                    },

                                    children: [

                                        { element: 'li', props: {className: 'li'}, children: ['first'] },

                                        { element: 'li', props: {className: 'li"}, children: ['second'] }

                                     ]

                            }

var element = {                               element： 'ul',                                 props: {                                   className: 'list'
},                                   children: [                                       { element: 'li', props:{className:'li'
},
children: ['first'] },                                      { element: 'li', props: {className: 'li"}, children: ['second'] }                                ]
}

        当我们想要在这里面删除first、second，然后添加一个third时，DOM操作就是逐步删除first、second，添加third，而如果是虚拟DOM树，将比较原有的和变化后的差距，保留之前存在first、second的对象，然后生成一个新的具有third的对象，通过JS算法进行比较然后修改。至于如何将虚拟DOM转为真实DOM，只要将element对象（具有TagName、props、children属性/*代码仅为示例*/），通过JS的各种方法如setAttribute、render、appendChild、createTextNode、createElement即可。

        粗略的说下了虚拟DOM的皮毛就这么多了。。。在下一篇再深入的剖析，React的各种相关内容，也会慢慢的整理出来。