你的当前位置: react虚拟DOM

F

react虚拟DOM

  • 发布时间: 2019-05-28 18:32:17

什么是虚拟DOM

            1.在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。

            2. 虚拟DOM是React的一大亮点,虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的,但是理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也会有很大帮助。


我们先自己实现React底层

        方式一

            1. 拿到state 数据。

            2. JSX 模板。

            3. 数据 + 模板 结合,生成真实的DOM,进行显示。

            4. state 发生变化。

            5. 重新生成新的DOM,替换原始的DOM,进行显示。


                缺陷: 一直生成DOM,极大的浪费性能。


       方式二       

            1. 拿到state 数据。

            2. JSX 模板。

            3. 数据 + 模板 结合,生成真实的DOM,进行显示。

            4. state 发生变化。

            5. 创建新的DOM和原始DOM进行比对,找到发生变化的元素。

            6. 替换掉有差异的元素。


                缺陷:性能提升不明显,一直生成DOM,虽然不需要替换全部。



        方式三   React底层的虚拟DOM

            1. 拿到state 数据。

            2. JSX 模板。

            3. 生成虚拟DOM(虚拟DOM就是一个js对象,用它来描述真实DOM)。

                相比js创建DOM,js创建js对象损耗了极小的性能

            4. 用虚拟DOM生成真实的DOM,进行显示。

            5. state 发生变化。

            6. 数据 +模板 生成新的虚拟DOM,

                相比生成真实DOM,生成虚拟DOM,极大的提升的性能

            7. 比较原始的虚拟DOM和新的虚拟DOM的区别,找到差异。

            8. 操作DOM,改变差异




                比如:虚拟DOM是一个对象     ['div',{id:'one'},['span',{class:'two'},'虚拟DOM']

                会生成<div id="one"><span class="two">虚拟DOM</span></div>

    

                    究竟是如何转换的,请了解diff算法


留言
0/360
加载更多…

备案/许可证编号: 豫ICP备18034271号