React 虚拟DOM优势

admin管理员组

文章数量:1028174

React 虚拟DOM优势

基本使用和理解

此篇适合前端小白阅读 职业前端可以跳过了

定义：是一个将数据渲染成HTML视图的开源JavaScript库

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. 操作DOM呈现页面

作用：

• 原生JavaScript操作DOM繁琐，效率低(DOM-API操作UI)
• 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排 不太友好
• 原生JavaScript没有组件化编码方案，代码复用 率低

react特点：

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在React Native 中可以使用React语法进行移动端开发
3. 关键特性：使用虚拟DOM(内存)+优秀Diffing算法，尽量减少与真实DOM的交互 --DOM的复用 更新时会比较DOM

依赖包：

• babel.min.js : 注意生产环境最好不使用，加载翻译jsx需要一定时间 会出现白屏
  • ES6=>ES5
  • jsx=>js
  • import
• react.development.js: react 核心库
• react-dom.development.js: react 扩展库

易错点：

• 依赖加载顺序
• babel作用：jsx=>js 如图：

• 虚拟DOM的第二种创建方式：

代码语言：html复制

React.createElement(标签名，标签属性，标签内容)  

JSX与JS：

JSX: 能更友好的创建虚拟DOM，示例：

代码语言：Jsx复制

	const VDOM = (
    /*此处一定不要写引号，因为不是字符串*/
	    <h1 id="title">   	       
             <span>Hello,React</span>
        </h1> )

关于虚拟DOM：

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较”重“，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX:

1. 全称JavaScript XML
2. react 定义一种类似XML的JS扩展语法：JS+XML
3. 语法规则：

• 定义虚拟DOM时，不要写引号
• 标签中混入JS表达式时要用{} ，注意只能写表达式
• 引入样式使用className
• 内联样式，要用style={{key:value}}的形式去写
• 只有一个根标签
• 标签必须闭合
• 标签首字母

1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错

2）若大写字母开头，react会去渲染对应的组件，若组件不存在会报错

语法规则如下图：

4. JS表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：

1）a

2）a+b

3）demo(1) --无返回值就return undefined

4）arr.map() --可遍历数组，但是对象obj不能遍历

代码语言：jsx复制

       <script type="text/javascript">
           let arr = [1, 3, 5, 7, 9]
           let result = arr.map((num) => {
               return num + 1
           })
           console.log(result)
       </script>

代码语言：jsx复制

 const data = ['Angular','React','Vue']
   const VDOM = (
       <div>
         <h1>前端js</h1>
         <ul>
           {
               data.map((item,index)=>{
                 return <li key={index}>{item}</li>
           })
           }
         </ul>
       </div>
   )

5）function test(){} --定义一个函数

1. JS语句（代码）：

下面这些都是语句：

1）if(){}

2）for(){}

3）switch(){case:xxx}

React模块

定义：向外提供特定功能的js程序，一般就是一个js文件

作用：复用js，简化js的编写

React组件

例如：实现一个头部导航栏实用到的（html、css、js、img、video、font）等资源的一个集合

作用：复用 ，方便其他地方引入

React 虚拟DOM优势

基本使用和理解

此篇适合前端小白阅读 职业前端可以跳过了

定义：是一个将数据渲染成HTML视图的开源JavaScript库

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. 操作DOM呈现页面

作用：

• 原生JavaScript操作DOM繁琐，效率低(DOM-API操作UI)
• 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排 不太友好
• 原生JavaScript没有组件化编码方案，代码复用 率低

react特点：

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在React Native 中可以使用React语法进行移动端开发
3. 关键特性：使用虚拟DOM(内存)+优秀Diffing算法，尽量减少与真实DOM的交互 --DOM的复用 更新时会比较DOM

依赖包：

• babel.min.js : 注意生产环境最好不使用，加载翻译jsx需要一定时间 会出现白屏
  • ES6=>ES5
  • jsx=>js
  • import
• react.development.js: react 核心库
• react-dom.development.js: react 扩展库

易错点：

• 依赖加载顺序
• babel作用：jsx=>js 如图：

• 虚拟DOM的第二种创建方式：

代码语言：html复制

React.createElement(标签名，标签属性，标签内容)  

JSX与JS：

JSX: 能更友好的创建虚拟DOM，示例：

代码语言：Jsx复制

	const VDOM = (
    /*此处一定不要写引号，因为不是字符串*/
	    <h1 id="title">   	       
             <span>Hello,React</span>
        </h1> )

关于虚拟DOM：

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较”重“，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX:

1. 全称JavaScript XML
2. react 定义一种类似XML的JS扩展语法：JS+XML
3. 语法规则：

• 定义虚拟DOM时，不要写引号
• 标签中混入JS表达式时要用{} ，注意只能写表达式
• 引入样式使用className
• 内联样式，要用style={{key:value}}的形式去写
• 只有一个根标签
• 标签必须闭合
• 标签首字母

1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错

2）若大写字母开头，react会去渲染对应的组件，若组件不存在会报错

语法规则如下图：

4. JS表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：

1）a

2）a+b

3）demo(1) --无返回值就return undefined

4）arr.map() --可遍历数组，但是对象obj不能遍历

代码语言：jsx复制

       <script type="text/javascript">
           let arr = [1, 3, 5, 7, 9]
           let result = arr.map((num) => {
               return num + 1
           })
           console.log(result)
       </script>

代码语言：jsx复制

 const data = ['Angular','React','Vue']
   const VDOM = (
       <div>
         <h1>前端js</h1>
         <ul>
           {
               data.map((item,index)=>{
                 return <li key={index}>{item}</li>
           })
           }
         </ul>
       </div>
   )

5）function test(){} --定义一个函数

1. JS语句（代码）：

下面这些都是语句：

1）if(){}

2）for(){}

3）switch(){case:xxx}

React模块

定义：向外提供特定功能的js程序，一般就是一个js文件

作用：复用js，简化js的编写

React组件

例如：实现一个头部导航栏实用到的（html、css、js、img、video、font）等资源的一个集合

作用：复用 ，方便其他地方引入

本文标签： React 虚拟DOM优势