【React】React全家桶（一）React 概述+虚拟DOM的创建与渲染+JSX

原创

已于 2022-09-03 16:44:08 修改 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #前端框架

于 2022-07-12 17:57:46 首次发布

文章目录

参考链接：

1 React 概述

1.1 React 简介与特点

React用于动态构建用户界面的 JS 库(只关注于视图)

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

原生JS的缺点

原生JS操作DOM繁琐，效率低，直接操作DOM，浏览器会进行大量的重绘重排
原生JS没有组件化编码方案，代码复用率很低

React的特点

使用虚拟DOM和Diff算法，尽量复用DOM节点，减少与真实DOM的交互
使用 JSX，代码的可读性更好
组件化模式，提高代码复用率、且让代码更好维护
声明式编程，让编码人员无需直接操作DOM，提高开发效率
在 React Native中可以使用React语法进行移动端开发

1.2 相关补充：命令式与声明式编程、重绘与重排、模块化与组件化、虚拟DOM

命令式编程与声明式编程

命令式编程：用详细的命令机器怎么去处理一件事情以达到你想要的结果.
例如你想通过点击改变页面中某一个元素，首先要获取按钮，再给按钮添加点击事件，获取要改变的元素，执行点击函数，改变元素达到自己的目的，这是一步一步的步骤操作，就如同给计算机发布命令，一步一步执行，这就是命令式编程
声明式编程：你只需要告诉计算机，你要得到什么样的结果，计算机则会完成你想要的结果，以React为例，在页面中通过 { } 显示一个变量，你只需要改变这个变量，页面就会跟着刷新，这就是你只需要结果，React 内部去处理过程，这就是声明式编程

重绘与重排

重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程
重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置的过程

模块化与组件化
业务逻辑：举个例子比如淘宝双12举办活动，那些活动页面的逻辑，什么时候显示，在某些情况下显示什么，在另外一些情况下又该显示什么，这就是业务逻辑
传统开发模式的主要问题：命名冲突、文件依赖，通过模块化可解决上述问题

模块：一个JS文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
模块化：从业务逻辑角度或功能需要角度划分的，按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播…），目的：隔离、分装
把单独的一个功能封装到一个模块（js文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
优点：方便代码的重用，从而提升开发效率，并且方便后期的维护

传统方式编写应用的问题：依赖关系混乱、代码复用率不高，通过组件化可解决上述问题

组件：可复用的 Vue/React 实例
组件化：从UI界面角度或复用的角度划分的，页面上每个独立的区域都可以看做是一个组件，目的：复用、解耦
一个界面的功能很复杂，将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得容易了，当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。
最大区别：划分角度不同，都是便于项目的维护和开发。

模块化是对功能的拆分，模块化并没有要求一定组件化，就是说进行模块化拆分时你可以完全不考虑代码重用，只是把同一业务的代码做内聚整合成不同的模块

虚拟DOM

虚拟DOM是JS按DOM（真实DOM)的结构来创建的虚拟树型结构对象，是对DOM的抽象，比DOM更加轻量型（属性更少），本质还是Object类型的对象，虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

2 初识React

2.1 引入相关库

react.js：React核心库。
react-dom.js：提供操作DOM的React扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

2.2 虚拟DOM的创建与渲染

JS 创建虚拟 DOM（一般不用）

<script type="text/JS" > 
//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{
   
   id:'title'},React.createElement('span',{
   
   },'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))
</script>

JSX 创建虚拟DOM

//1.创建虚拟DOM
script type="text/babel" > /* 此处一定要写babel */
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
		<span>Hello,React</span>
	</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))
</script>

虚拟DOM的渲染

语法 ：

//virtualDOM为虚拟dom  containerDOM用来包裹虚拟DOM的真实dom对象
ReactDOM.render(virtualDOM, containerDOM)

作用: 将虚拟DOM渲染为真实DOM，然后在页面中显示

代码总览

<!DOCTYPE html>
<html lang="en

最低0.47元/天解锁文章