React-1-介绍

雨橄

已于 2022-12-08 15:32:27 修改

阅读量642

点赞数

分类专栏：前端文章标签： react.js javascript ui

于 2022-09-10 16:21:12 首次发布

本文链接：https://blog.csdn.net/xiao_yu_gan/article/details/126797316

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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>

压缩版（生产环境）

<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>

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

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

4、入门使用案例

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用js创建虚拟DOM</title>
    </head>
    <body>
        <!-- “容器”标签，用于给React渲染虚拟DOM -->
        <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>

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用jsx创建虚拟DOM</title>
    </head>
    <body>
        <!-- “容器”标签，用于给React渲染虚拟DOM -->
        <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属性一定要为babel，因为需要依赖babel将jsx代码转为js代码 -->
        <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>