1、React介绍

1、介绍

React中文官网：https://react.docschina.org。

React是用于构建用户界面的JS库，起源于Facebook的内部项目，该公司对市场上所有JS MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站，于2013年5月开源。

React主要用于构建UI，只关注视图层。

2、为什么使用React

优点

声明式设计：React采用声明范式（语法十分接近HTML），可以轻松描述应用。

组件化：为程序编写独立的模块化UI组件，然后组合构成复杂的UI，这样当某个组件出现问题时，可以方便地进行隔离排查。

速度快：在UI渲染过程中，React不总是直接操作页面真实DOM，而是通过在虚拟DOM中的微操作，来实现对实际DOM的局部更新（优秀的Diffing算法）。

灵活：React可以与已知的库或框架很好地配合。

缺点

React并不是一个完整的框架，本身只是View，如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

3、安装引入React

react.js：React核心库。
react-dom.js：React操作DOM的拓展库。
babel.js：提供JSX=>JS、ES6=>ES5的工具包库。

方式一：通过标签引入（版本17）

源码版（开发环境）

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.js">script>
1
2
3

压缩版（生产环境）

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js">script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
1
2
3

方式二：通过npm安装引入（版本17）

npm install react@17 react-dom@17 babel@6
1

4、入门使用案例

这里演示React创建虚拟DOM，并将虚拟DOM渲染到页面真实DOM。

方式一：使用JS方式（一般不用）

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用js创建虚拟DOMtitle>
    head>
    <body>
        
        <div id="container">div>

        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js">script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js">script>

        <script type="text/javascript" > 
            /**
             * 1.创建虚拟DOM
             *      参数1：标签名
             *      参数2：标签属性（这里为h1标签添加title属性）
             *      参数3：标签内容
             */
            const VDOM = React.createElement('h1',{"title":"articleTitle"},"h1标签内容")
            /**
             * 2.渲染虚拟DOM到页面
             *      参数1：需要被渲染的虚拟DOM
             *      参数2：虚拟DOM被渲染到的目标标签
             */
            ReactDOM.render(VDOM,document.getElementById('container'))
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

方式二：使用JSX方式（最常用，但其实最终babel还是会将JSX转换成JS的方式创建虚拟DOM）

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用jsx创建虚拟DOMtitle>
    head>
    <body>
        
        <div id="container">div>

        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js">script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js">script>

        
        <script type="text/babel" >
            //1.创建虚拟DOM
            const VDOM = (  /* 此处一定不要写引号，因为不是字符串，此处是JSX语法 */
                <h1 title="articleTitle">
                    h1标签内容
                </h1>
            )
            //2.渲染虚拟DOM到页面
            ReactDOM.render(VDOM,document.getElementById('container'))
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5、虚拟DOM

什么是虚拟DOM

虚拟DOM本质上是一个JS对象（object类型），对象内部封装了一些属性。在指定的时刻，React将虚拟DOM渲染到页面的实际DOM，本质还是通过js操作页面DOM实现的。

虚拟DOM好处

虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

通过在虚拟DOM中的微操作，实现对实际DOM的局部更新，避免每次直接操作页面真实DOM，减少真实DOM操作次数，提高效率。

在这里插入图片描述

相关阅读:
R语言—向量
 Shell编程之正则表达式
 Ajax与jQuery
软件开发项目文档系列之十如何撰写测试用例
 如何做好shopee的优化—成都扬帆际海教育咨询公司
 【数据结构】链表C++编写的，它定义了一个链表，并实现了一些基本的链表操作，如创建新节点、插入节点、清空链表、输出链表以及查找节点
 野火A7学习第十次(状态机相关)
卷积神经网络作业
 FuseDream论文阅读笔记文本生成图像 text2image
一、综合——通信职业道德
原文地址：https://blog.csdn.net/xiao_yu_gan/article/details/126797316