React（一）- React简介与基本使用

最新推荐文章于 2024-06-23 16:27:10 发布

Zong_0915

最新推荐文章于 2024-06-23 16:27:10 发布

阅读量571

点赞数 2

分类专栏： React

本文链接：https://blog.csdn.net/Zong_0915/article/details/115297428

版权

React 专栏收录该内容

27 篇文章 5 订阅

订阅专栏

本文介绍了React的基本概念，包括其优点、原生JS的局限性，以及如何通过JSX创建虚拟DOM和渲染。重点讲解了HelloWorld案例、虚拟DOM的工作原理和实践应用，同时提供了JSX语法规则和实例演示。

摘要由CSDN通过智能技术生成

React系列文章导航

前言

本系列是我学习React的一些学习笔记，主要参考B站张天禹老师的视频。

一. React简介

React是一个构建用户界面的JS库，用于操作DOM呈现界面，将数据渲染为HTML视图。
React的特点：

采用组件化模式、声明式编码，提高开发效率以及组件利用率。
在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM+Diffing算法，减少和真实DOM的交互。

1.1 原生JS的弊端

举个案例：
假设下面的数组是要赋值给< li >标签，那么肯定赋值时候进行一个for循环，循环100次

let person = [
	{id:'001',name:'str1'},
	{id:'002',name:'str2'},
	....
	{id:'100',name:'str100'}
]

倘若此时数组中新添加了一个元素{id:‘101’,name:‘str101’}，那么JS会进行for循环，循环101次，而前面的100次就不能够得到复用。

而React的处理则是：

对每一条数据都生成一个虚拟DOM。DOM对应页面上的一条数据。
若数组中新增一个数据，那么则在原来的基础上增加一个虚拟DOM，原本的不会抛弃，而页面就不需要重新生成前面100条数据对应的DOM，即得到了复用，即页面渲染时，只会渲染新增的那一条DOM。也因此React的渲染效率非常高。

1.2 React的引用和相关文件作用

使用React的时候，需要引入3个JS文件：

react.development.js：React的核心库
react-dom.development.js：React扩展库，比如自动操作DOM
babel.min.js：在React中用它来将jsx转换为纯js代码，ES6转化为ES5。

直接引用官方的JS文件即可：

// 注意顺序，先引入核心库、再扩展库、再babel
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

二. React的基本使用

2.1 HelloWorld案例及其易错点

案例Hello World如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!--引入React的核心库-->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!--引入React的扩展库-->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel，将jsx转化为js-->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <!--准备好一个容器-->
    <div id="test"></div>

    <!--此处必须写babel,是为了将jsx代码翻译成js-->
    <script type="text/babel">
        // 1.创建虚拟DOM，此处不能写单引号，因为并不是一个字符串
        const VDOM = <h1>Hello World~</h1>
        // 2.渲染虚拟DOM到页面：ReactDOM.render(虚拟DOM,容器)
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>
</html>

结果如下：
在这里插入图片描述
注意1：F12后可以发现控制台有提示信息：

意思总结下就是：如果是生产环境，最好要把代码预编译一下。

为什么呢？原因如下：

React中用的是JSX，我们需要用Babel来进行翻译工作，将其翻译成JS。
所以如果当我们JSX代码很多的情况下，访问页面的时候可能会出现白屏的情况（即JSX代码没有翻译完）。
因此上述的写法一般不适用于生产环境，故报了一个提示信息。

注意2：如果说DOM元素添加了单引号，即变成：

const VDOM = '<h1>Hello World~</h1>'

那么打印出来的将会是一行字符串，而不是h1标签内容：
在这里插入图片描述
注意3：翻译JSX代码必须使用babel，若使用JavaScript则报错：

<script type="text/javascript">
	// 1.创建虚拟DOM，此处不能写单引号，因为并不是一个字符串
	const VDOM = <h1>Hello World~</h1>
	// 2.渲染虚拟DOM到页面：ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

报错：语法错误
在这里插入图片描述

2.2 虚拟DOM

2.2.1 创建虚拟DOM的两种方式（React）

用JSX创建虚拟DOM

<script type="text/babel">
    // 1.创建虚拟DOM，此处不能写单引号，因为并不是一个字符串
    const VDOM = (
        <h1 id="title">
            <span>Hello World</span>
        </h1>
    )
    // 2.渲染虚拟DOM到页面：ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

用JS创建虚拟DOM

<script type="text/javascript">
    // 1.创建虚拟DOM   document.createElement是创建真实DOM，React.createElement是创建虚拟DOM
    // React.createElement(标签名，标签属性，标签内容)
    const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello world'));
    // 渲染DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

可以做出比较:

如果我需要写一个标签的多重嵌套，那么对于传统的JS写法，我们需要写多个React.createElement，代码显得太复杂，而JSX写法则可以非常直接。
JSX风格的代码，虚拟DOM的写法和HTML的写法没有区别。

2.2.2 虚拟/真实DOM

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>
<body>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="test"></div>
    <div id="demo"></div>

    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = (
            <h1 id="title">
                <span>Hello World</span>
            </h1>
        )
        const TDOM = document.getElementById('demo');

        console.log('虚拟DOM', VDOM);
        console.log(typeof VDOM);

        console.log('真实DOM', TDOM);
        console.log(typeof TDOM);
    </script>
</body>
</html>

结果控制台的输出如下：
在这里插入图片描述
虚拟DOM包含的属性：

真实DOM包含的属性：
在这里插入图片描述

虚拟DOM vs 真实DOM：

本质是Object类型的对象，也就是一般对象。
虚拟DOM所包含的属性比较少，而真实DOM包含的属性比较多。因为虚拟DOM是面向React内部去使用的，不需要太多的真实属性。
虚拟DOM最终会被React转化成真实的DOM，呈现在页面上。

2.3. JSX语法规则

JSX的全称为JavaScript XML，其需要遵循这么几个规则：

定义虚拟DOM的时候，不能够加引号。
标签中引入JS表达式的时候要用{}。

案例1如下：

<body>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="test"></div>
    <script type="text/babel">
        // 1.创建虚拟DOM
        const myId = 'ABCD'
        const myData = '今天天气真好'
        const VDOM = (
            <h2 id={myId.toLowerCase()}>
                <span>{myData}</span>
            </h2>
        )
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

输出如下：
在这里插入图片描述

JSX中，若想引用样式，应该用className去代替传统的class。

案例2如下（在案例1的基础上）：

<head>
    <meta charset="UTF-8">
    <title>JSX规则</title>
    <style>
        .title{
            background-color: blueviolet;
            width: 200px;
        }
    </style>
</head>
<body>
    // 省略..
    <div id="test"></div>
    <script type="text/babel">
        // 1.创建虚拟DOM
        const myId = 'ABCD'
        const myData = '今天天气真好'
        const VDOM = (
            <h2 class= "title" id={myId.toLowerCase()}>
                <span>{myData}</span>
            </h2>
        )
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

虽然页面能够正常展现对应的效果：
在这里插入图片描述
但是控制台会报错，将class="title"改为className="title"即可。

内联样式，需要用style={{key:value}}的形式去写。

案例3如下（案例2的基础上）：

传统的写法：
<div id="test" style="color: blueviolet; font-size: 20px;"></div>
JSX写法：
<span style={{color:'white',fontSize:'30px'}}>{myData}</span>

结果如下：
在这里插入图片描述

虚拟DOM只有一个根标签。

案例4如下：可以发现报错，若要写多个标签，最外层可以放一个div。
在这里插入图片描述

虚拟DOM中的标签必须闭合。

案例5如下：
在这里插入图片描述
更改如下即可：

标签首字母，若以小写字母开头，则将标签转换为HTML中同名的元素；若HTML中没有该标签对应的同名元素，则报错。

案例6如下：
在这里插入图片描述
结果如下：翻译为：如果要呈现React组件，请以大写字母开头

若以大写字母开头，React就会去渲染对应的组件，若组件没有定义，则报错。

案例7如下：
在这里插入图片描述
报错如下：

三. Demo-JSX练习

Demo1：React自动遍历数组

<div id="test"></div>

<script type="text/babel">
    const data =['Angular','React','Vue']
    const VDOM = (
        <div>
            <h1>前端JS框架列表</h1>
            <ul>
                {data}
            </ul>
        </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>