React 学习笔记（1）认识虚拟Dom

土圭垚墝
185 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

前一段时间学习了一下Vue，硬着头皮啃了一下ElementUI 是感觉用于快速开发的一门前端框架，上手很快，但是好多原理性的东西都不懂，遇到问题很难解决，最近激发了对React的兴趣，有人说他就是前端PHP，跟PHP非常相似，可以学习到JavaScript很多底层知识，更贴近后端开发的思想，所以就开个专栏记录一下自己的学习历程，主要是根据B站的React视频总结一下

引入的3个js文件

从本地单文件开发开始，一开始不直接使用脚手架，从最基础的开始
需要引入三个文件

  • react.development.js
    React 开发版核心代码
  • react-dom.development.js 处理 Dom 相关功能
  • babel.min.js 编译相关。用于处理将 JSX 转化为标准的 JavaScript 代码

认识React虚拟Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟Dom</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">

        const VDom =(<h1 id='title'>
            <span>Hello React</span> 
            </h1>
            )
        ReactDOM.render(<Demo/>,document.getElementById('test'))
        console.log("虚拟Dom",VDom);
        console.log(typeof VDom)

    </script>
</body>
</html>

虚拟Dom

三个主流JavaScript框架:Vue.js、Angular和React都是声明式操作DOM。通过描述状态和DOM之间映射关系，就可以将状态渲染成视图 ，都有一个虚拟Dom的概念 。

创建虚拟Dom（jsx方式）

这里就是React使用jsx语法写的内容：

 const VDOM = <h1>Hello ,土圭垚墝</h1>
 ReactDOM.render(VDOM,document.getElementById('test'))

image.png

原生创建虚拟Dom

    //    const VDOM = React.createElement(标签名,标签属性,标签内容)
    const VDOM = React.createElement('h1',{id:'title'},'Hello React')
    ReactDOM.render(VDOM,document.getElementById('test'))

image.png 此时不需要babel.js把jsx代码转为js
所以jsx会让代码更简单，效率比更改，React根据jsx处理很多东西。

总结

可以尝试打印一些这些虚拟Dom，发现打印出来是一些对象。

image.png 虚拟dom本质是Obeject类型的对象，没有真实Dom那么多属性，React会处理这些虚拟的Dom转换成真实的Dom渲染到页面上。

avatar
文章
阅读
粉丝