• 技术文章 >web前端 >前端问答

    react为什么要引入虚拟dom

    长期闲置长期闲置2022-05-05 11:24:14原创115

    因为在react中会出现定义大量实际dom的情况,需要频繁的操作大量实际dom,这样会带来访问性能的严重下降,所以需要引入虚拟dom,避免频繁的dom操作带来的性能下降问题,虚拟dom可以更好地提升页面性能。

    本教程操作环境:Windows10系统、react16.4.0版、Dell G3电脑。

    react为什么要引入虚拟dom

    React框架的核心之一就是虚拟DOM,相对于实际DOM而言,虚拟DOM可以更好地提升页面性能。

    为什么要使用虚拟DOM?

    通常设计人员在设计传统HTML网页的UI时, 都会在页面中定义若干的DOM元素, 这些DOM元素是所谓的实际DOM。实际DOM负责承载着外观表现和数据变化,任何外观形式的改变或数据信息的更新都要反馈到UI上, 都是需要通过操作实际DOM来实现的。但对于复杂的页面UI而言, 往往会定义大量的实际DOM。频繁地操作大量实际DOM, 往往会带来访问性能的严重下降, 用户体验也会随之变差, 因此, React框架专门针对这个现象引入了虚拟DOM机制,以避免频繁的DOM操作带来的性能下降问题。

    React DOM类似于一种将相关的实际DOM组合在一起的集合, 是有区别于传统概念上的DOM元素的,如果将其理解为DOM组件应该更为贴切,所以React框架将ReactDOM称为虚拟DOM。

    创建虚拟DOM

    纯js方式 React.createElement('h1',{},title)

    JSX方式 <h1 id='myTitle'>{title}</h1>

    下面感受一下实际DOM和虚拟DOM书写的区别

    实际DOM

        <div id="example"></div>
        <script>
        // 实际DOM
            // 定位到div
            const divDOM = document.getElementById('example');
            // 创建DOM控件
            const jsSpan = document.createElement('span');
            const jsH3 = document.createElement('h3');
            jsH3.innerHTML = '实际DOM';
            const jsP = document.createElement('p');
            jsP.innerHTML = 'Hello World!';
            jsSpan.appendChild(jsH3);
            jsSpan.appendChild(jsP);
            divDOM.appendChild(jsSpan);
        </script>

    虚拟DOM

    在使用React框架之前需要提前导入React的js库

        <!-- react的核心库 -->
        <script src="../React/react.development.js"></script>
        <!-- react的DOM库 -->
        <script src="../React/react-dom.development.js"></script>
        <!-- 编译器 将ES6转换为ES5 -->
        <script src="../React/babel.min.js"></script>
        <div id="example"></div>
        <script type="text/babel">// type必须有
        // 虚拟DOM
            const divReact = document.getElementById('example');
            const reactH3 = React.createElement('h3',{},'虚拟DOM');
            const reactP = React.createElement('p',{},'Hello World!');
            const reactSpan = React.createElement('span',{},reactH3,reactP);
            ReactDOM.render(reactSpan,divReact);// 将reactSpan插入divReact
        </script>

    推荐学习:《react视频教程

    以上就是react为什么要引入虚拟dom的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react性能优化是哪个周期函数 下一篇:es6怎么去掉字符串的空格
    千万级数据并发解决方案

    相关文章推荐

    • react三种定义组件方法有什么区别• react兼容什么版本的ie• react-dnd怎么实现拖拽• rxjs和react的区别是什么• react中usestate改变值不渲染怎么办
    1/1

    PHP中文网