React入门学习

最新推荐文章于 2025-04-06 09:00:00 发布
最新推荐文章于 2025-04-06 09:00:00 发布
阅读量528 收藏
点赞数
分类专栏： 前端 react 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39736597/article/details/130345212
版权
本文介绍了React作为一个用于构建用户界面的JavaScript库，强调其声明式编程、组件化特性以及ReactNative原生应用开发。通过HelloReact示例展示了如何使用React、ReactDOM和Babel创建和渲染虚拟DOM。文章还探讨了虚拟DOM与真实DOM的区别，JSX语法以及模块化和组件化的概念，帮助初学者理解React的基本用法和重要概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考资料：https://bright-boy.gitee.io/technical-notes/#/react/React%E5%85%A5%E9%97%A8
https://github.com/xzlaptt/React
react学习01: https://docs.qq.com/doc/DSG1jdUJtQ3FYR1V1
react学习02: https://docs.qq.com/doc/DSGhGZk9PUm1KVldv

React简介

框架定义

在这里插入图片描述

开发者

在这里插入图片描述

为什么学

在这里插入图片描述

react特点

在这里插入图片描述
JS只是模块化编码，页面整体资源的组件化JS不能完成。声明式编码。

对于第3点，下面举例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
React优势是不会丢弃之前渲染的DOM，比如现在有100个DOM，后面新增1个DOM，其实只有1个DOM发生变化。

学习React之前需要掌握的技能

在这里插入图片描述

相关介绍：

官网
1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/
介绍描述
1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源
React的特点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）
React高效的原因
1.React高效的原因
2.2.DOM Diffing算法, 最小化页面重绘。

React基本使用

HelloReact

效果

在这里插入图片描述

相关js库
1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库
3.babel.min.js：解析JSX语法代码转为JS代码的库。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>

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

    </div>


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于解析jsx语法为原生js语法-->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- babel将jsx代码翻译为js代码 -->
    <script type="text/babel">
        // 1.创建一个虚拟DOM
        let vDOM = <h2>hello,react</h2> // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串
        // console.log(vDOM,typeof vDOM)
        let vDOM2 = <h2>hello,react2</h2> 
        // 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）
        ReactDOM.render(vDOM, document.getElementById('test'))
        // 下面的会覆盖上面的效果，因为是不是追加的操作
        //ReactDOM.render(vDOM2, document.getElementById('test'))

    </script>
</body>

</html>

创建虚拟DOM的两种方式

在这里插入图片描述
1.纯JS方式(一般不用)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用js创建虚拟DOM</title>
</head>

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

    </div>


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>


    <!-- babel将jsx代码翻译为js代码 -->
    <script type="text/javascript">
        // 1.创建一个虚拟DOM,创建真实DOM用document.createElement
        const vDOM = React.createElement('h1', {id:'title'}, React.createElement('span', '', 'hello,react'))
        // 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）
        ReactDOM.render(vDOM, document.getElementById('test'))

    </script>
</body>

</html>

2.JSX方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>

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

    </div>


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于解析jsx语法为原生js语法-->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- babel将jsx代码翻译为js代码 -->
    <script type="text/babel">
        // 1.创建一个虚拟DOM
        let vDOM = (
            <h2 id="title">
                <span>hello,react</span>
            </h2>
        ) // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串
        // 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）
        ReactDOM.render(vDOM, document.getElementById('test'))

    </script>
</body>

</html>

虚拟DOM与真实DOM

1.React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>

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

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


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于解析jsx语法为原生js语法-->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- babel将jsx代码翻译为js代码 -->
    <script type="text/babel">
        // 1.创建一个虚拟DOM
        let vDOM = (
            <h2 id="title">
                <span>hello,react</span>
            </h2>
        ) // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串
        // 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）
        ReactDOM.render(vDOM, document.getElementById('test'))

        const TDOM = document.getElmentById('demo')
        // 实际上就是Object对象
        console.log('虚拟DOM', vDOM)
        console.log('真实DOM', TDOM)
        console.log(typeof vDOM)
        
        /**
         * 关于虚拟DOM
         * 1.本质是Object类型的对象（一般对象）
         * 2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
         * 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
         * **/
    </script>
</body>

</html>

React JSX

简介

效果

在这里插入图片描述

JSX

1.全称: JavaScript XML
2.react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
3.作用: 用来简化创建虚拟DOM
1)写法：var ele =
Hello JSX!
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象

4.标签名任意: HTML标签或其它标签
5.标签属性任意: HTML标签属性或其它
6.基本语法规则

1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

7.babel.js的作用

1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM(元素)

1.语法: ReactDOM.render(virtualDOM, containerDOM)
2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3.参数说明

1)参数一: 纯js或jsx创建的虚拟dom对象
2)参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX语法规则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
    <style>
        .title{
            background-color: orange;
            width:200px
        }
    </style>
</head>

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

    </div>


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于解析jsx语法为原生js语法-->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">

        const myId = 'aTguIGu'
        const myData = 'Hello, rEacT'
        // 1.创建一个虚拟DOM
        const VDOM = (
            <div>
                <h2 className = "title" id ={myId.toLowerCase()}>
                    <span style ={{color:'white'}}>{myData.toLowerCase()}</span>    
                </h2>
                <h2 className = "title" id ={myId.toUpperCase()}>
                    <span style ={{color:'white'}}>{myData.toLowerCase()}</span>    
                </h2>
                <input type="text"/>
                <good>123</good>
            </div>
            
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        /**
         * jsx语法规则：
         *          1.定义虚拟DOM时，不需要引号
         *          2.标签中混入JS表达式时要用{},注意，这里不是指js代码
         *          3.样式的类名指定不要用class，要用className
         *          4.内联样式，要用style={{key:value}}的形式去写
         *          5.虚拟DO吗必须只有一个根标签
         *          6.标签必须闭合
         *          7.标签首字母
         *              （1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
         *              （2）若大写字母开头，react就去渲染对应的组建，若组件没有定义，则报错
         * **/

    </script>
</body>

</html>

JSX小练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jsx小练习</title>
</head>

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

    </div>


    <!--react的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--react的扩展库，专门用于操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于解析jsx语法为原生js语法-->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- babel将jsx代码翻译为js代码 -->
    <script type="text/babel">
        /**
         * 一定注意区分，【js语句（代码）】与【js表达式】
         *      1.表达式：一个表达式会产生一个值，可以放在任何一个需要的地方，可以使用let value接受
         *          下面这些都是表达式
         *              （1）.a
         *              （2）.a+b 
         *              （3）.demo(1)
         *              （4）.arr.map()
         *               (5). function test(){}
         *       1.语句（代码）“
         *          下面这些都是表达式
         *              （1）.if(){}
         *              （2）.for(){}
         *              （3）.switch(){case:xxxx}

         * **/
        // 模拟一些数据
        const data = ['Angular', 'React', 'Vue']
        const data2 = [<li>Angular</li>,<li>React</li>,<li>Vue</li>]
        // 1.创建一个虚拟DOM
        let vDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item)=>{
                            // 必须要有key
                            return <li key ={item}>{item}</li>
                        })
                    }
                    
                </ul>
            </div>
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(vDOM, document.getElementById('test'))

    </script>
</body>

</html>

模块与组件、模块化与组件化的理解

简介

效果

在这里插入图片描述

模块

1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率

组件

1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

在这里插入图片描述

ReSharper常用快捷键
07-13
该资源是ReSharper Tips的常用快捷键，可能打上中文补丁就可以直接查看tips了。
vs.net使用技巧手册
02-12
本手册将深入探讨一系列实用的VS.NET使用技巧，帮助开发者提高工作效率，提升开发体验。 1. **快捷键与自定义布局** - 掌握VS.NET内置的常用快捷键可以极大地提高编程速度，例如`Ctrl+K, Ctrl+C`用于注释选定的...
VS代码生成工具ReSharper配置快捷键
BTfan123的专栏
05-16 3639
VS代码生成工具ReSharper提供了丰富的快捷键，可以极大地提高你的开发效率。安装ReSharper后首次启动Visual Studio时，会出现一个名为ReSharper Keyboard Scheme的对话框，如下图所示： 选择对话框提供的三个选项之一后的任何时候，您可以配置单独的键盘快捷键。 配置单个键盘快捷键 1、在主菜单上，选择Tools | Options
【工具】ReSharper 插件使用备忘（安装与配置、ReSharper 主要功能介绍）
最新发布
一个XR（AR|VR|MR）程序猿的博客（EQ-雪梨蛋花汤）
04-06 597
ReSharper 是由 JetBrains 开发的一款功能强大的 Visual Studio 插件，主要用于提升 C# 和其他 .NET 语言的开发效率。它提供代码分析、自动重构、代码格式化、代码导航等功能，是许多开发者必备的工具。
Resharper 的快捷键
不再想当菜鸟了
08-16 1247
Ctrl + Space 代 码完成 Ctrl + Shift + Space代码完成 Ctrl + Alt + Space代码完成 Ctrl + P 显示参 数信息 Alt + Insert 生 成构造函数，属性，重载成员函数，实现接口 Ctrl + Alt + J 生成if,try..catch,#region块 Ctrl + / 注释及 取消//注释 Ctrl + Shift
VS代码生成工具ReSharper使用手册：配置快捷键（转）
weixin_34266504的博客
11-30 337
一、快捷键 原文：http://blog.youkuaiyun.com/fhzh520/article/details/46364603 VS代码生成工具ReSharper提供了丰富的快捷键，可以极大地提高你的开发效率。   配置单个键盘快捷键 1、在主菜单上，选择Tools | Options 2、在导航视图中选择Environment | Keyboard 3、在命令列表中，选择启动Re...
Resharper快捷键(VS的F6编译-F12默认设置) Resharper与VS快捷键
ldp365的专栏
08-20 3503
1：如何设置vs默认的快捷键体式格式：   2：从头设置resharper的F12及其其它选项设置：
Resharper详细教程
热门推荐
极客神殿
07-22 1万+
前言 原文中部分快捷键在8.2版本中不适用，我已改正，并用红色标注出来 在线API：https://www.jetbrains.com/help/resharper/Introduction__Index.html Reshaper是什么 即便是那些整天攻击 .NET 和 C# 的人，也常常不得不承认 Visual Studio 确实是个够强大的 IDE，除非他认为更少的 IDE 功能和命令行调试才是更强大的。可是，即便如此，仍阻止不了一些第三方的个人和厂商开发出一些插件来让 VS 变得更强大。Resh
VS2017插件故障排除手册：专家解答安装常见问题
[VS2017插件故障排除手册：专家解答安装常见问题](https://learn.microsoft.com/en-us/visualstudio/ide/media/vside_perfdialog_extensions.png?view=vs-2022) # 摘要 本文详细介绍了VS2017插件的安装、配置、故障...
Visual Studio.NET快捷键与操作技巧手册
本文档《Visual Studio.NET使用技巧手册》旨在为读者提供一系列实用的快捷键和技巧，以提升开发者的专业技能和工作效率。 ### 快捷键使用技巧 Visual Studio.NET拥有众多快捷键，熟练掌握并运用这些快捷键可以大幅...
【PC-lint与持续集成工具集成】：实现高效的代码质量保障
本文首先介绍PC-lint工具和持续集成工具的基础知识，着重阐述了PC-lint的安装、配置、代码检查规则的应用以及与IDE的集成方法。随后，本文探讨了持续集成工具的原理、Jenkins的基本操作和与版本控制系统的集成。在...
VSNET使用技巧手册
10-15
- 自定义工作区布局：VS.NET允许用户根据个人习惯定制工具窗口的位置和大小，保存并加载不同的布局配置，适应不同类型的项目需求。 2. **代码自动完成与IntelliSense** - 使用IntelliSense功能，VS.NET会智能提示...
VS、ReSharper 设置修改代码颜色、提高代码辨识度！附VS超实用快捷！
weixin_33701617的博客
03-21 1114
ReSharper 配置代码颜色 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！助力快速完成 VS 与 Resharper 的简单设置为新手节省宝贵的时间，避免采坑！ 最终效果：( 色彩由自己定义...
VS 与 Resharper 常用设置 （为自己）
蛰伏--当你不够强大时，就不要放弃努力
07-11 3779
1resharper 长度500换行。 Resharper-Options-CodeEditing-C#-Formating Style-LineBreaks and Wrapping-LineWrapping-Right margin(columns) 设置大点 Options-Visual Assist Options -- Underlining 红色波浪线 2...
解决中文版VisualStudio中使用Resharper快捷键问题
hijk7的博客
09-08 256
解决中文版VisualStudio中使用Resharper快捷键问题
【VS快捷键的使用】
qq_41610493的博客
03-22 603
变量转到定义、转到该变量定义类的位置、查看该变量那些地方引用：Ctrl+Shift+G。if、while、fori、try-catch：Ctrl+Alt+J包围代码。资源管理器将定位到当前文件：Shift+Alt+L。项目中添加一个类：Ctrl+Alt+Insert。变干净以及变规范：Ctrl + Alt + F。提取一个方法成接口：Ctrl+Shift+R。移动代码块：Ctrl+Shift+Alt。查看类的结构和方法：Ctrl + F11。整理代码：Ctrl+Alt+L。自动补全：Ctrl+Alt+V。
Visual Studio快捷键小全（VS）
H_2016_Framework的博客
01-31 526
Visual Studio && Resharper快捷键小全
VS Resharper快捷键没了处理办法
u014712365的博客
08-04 896
vs2019，Resharper2019，安装卸载多次都没有快捷键，今天遇到了，百度了一下， 原文：https://blog.youkuaiyun.com/mask_soft/article/details/16979435 摸索出来的，希望对你的电脑有用。 安装完Resharper后的界面 进入【工具】-【选项】-【键盘】 按照步骤设置，设置成跟界面一样的效果 ...
ReSharper使用手册：配置语法高亮字体和颜色
BTfan123的专栏
05-21 4907
在Visual Studio的Options对话框中，你可以配置一个颜色方案和字体。在本文中主要介绍如何在ReSharper中配置语法高亮字体和颜色。 配置颜色和字体 1、在主菜单上，选择Tools | Options。 2、在左窗格中展开Environment节点。 3、选择Fonts and Colors选项卡。 4、在Display items中，滚动列表并选择
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值