React入门学习

news2024/11/26 10:37:54

参考资料：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都以模块来编写的, 这个应用就是一个模块化的应用

组件化

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/459660.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

滚动数组-动态规划之-不同路径 II_20230421

滚动数组-动态规划之-不同路径 II_20230421

DP动态规划之-滚动数组 前言 在学习 不同路径II 的动态规划过程中&#xff0c;从介绍资料中了解到 滚动数组可以进一步降低动态规划解空间的复杂度&#xff0c;更高效利用计算机的储存空间。动态规划中的滚动数组究竟能发挥哪些作用&#xff0c;在常规的动态规划中&#xff0…
阅读更多...
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）

SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）

前端打包部署 前端项目为vue项目&#xff0c;使用vue admin template作为后台管理模板进行开发。 前端打包 了解开发环境、生产环境&#xff0c;修改生产环境的配置 在开发的时候&#xff0c;往往使用本地电脑进行开发。但是项目上线的时候&#xff0c;需要部署到云服务器中…
阅读更多...
基于二阶锥规划（SOCP）松弛和线性离流的配电网规划（DNP）方法示例（Matlab代码实现）

基于二阶锥规划（SOCP）松弛和线性离流的配电网规划（DNP）方法示例（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 配电网最优潮流 Optimal Power Flow, OPF) 问题是指在满足一定约束条件的情况下&#xff0c;通过控制配电网中的可控变量&…
阅读更多...
内网Nexus代理docker-ce(yum) 源私有仓库 + 内网设备配置（centos）

内网Nexus代理docker-ce(yum) 源私有仓库 + 内网设备配置（centos）

配置docker-ce源 这里也是以阿里云的docker-ce源为例。 源地址为&#xff1a;https://mirrors.aliyun.com/docker-ce/linux/centos 1、在nexus上配置代理 Nexus上创建Blob Stores 创建Repositories 点击设置 - -> Repositories -- > Create repository --> yum(p…
阅读更多...
分布式消息队列Kafka（二）- 生产者

分布式消息队列Kafka（二）- 生产者

1.生产者消息发送流程 &#xff08;1&#xff09;消息发送原理 ​ 在消息发送的过程中&#xff0c;涉及到了两个线程——main线程和 Sender 线程。在 main 线程中创建了一个双端队列 RecordAccumulator。main 线程将消息发送给 RecordAccumulator&#xff0c;Sender 线程不断…
阅读更多...
刘浩：当谈到RTO ＜ 8s时，OceanBase究竟在说什么？

刘浩：当谈到RTO ＜ 8s时，OceanBase究竟在说什么？

本文为 OceanBase 高级技术专家刘浩在第一届 OceanBase 开发者大会带来的分享。欢迎访问 OceanBase 官网获取更多信息&#xff1a;https://www.oceanbase.com/ 3 月 25 日&#xff0c;第一届 OceanBase 开发者大会在北京举行&#xff0c;OceanBase 高级技术专家刘浩为大家带来了…
阅读更多...
VuePress打包后没有样式或者没有图片或者js加载失败

VuePress打包后没有样式或者没有图片或者js加载失败

原因是没有部署到服务器上&#xff01;&#xff01;&#xff01; 这可能是我们打包后的东西 直接点击index.html 变成这样了&#xff01;&#xff01;什么样式都没有了&#xff0c;怎么办那&#xff1f; 很简单&#xff0c;找个服务器部署以下就什么都有了&#xff01;&…
阅读更多...
NC 打开系统提示“安全日志数据源异常，请联系环境管理员处理”

NC 打开系统提示“安全日志数据源异常，请联系环境管理员处理”

问题&#xff1a;NC 用的是sql sever数据库&#xff0c;在sysConfig中正常配置好数据源后&#xff0c;点击测试&#xff0c;测试通过&#xff0c;但是打开系统后还提示“安全日志数据源异常&#xff0c;请联系环境管理员处理”&#xff0c;如下图&#xff1a; 原因&#xff1a;…
阅读更多...
echarts 画中国地图

echarts 画中国地图

数据可视化平台&#xff0c;中国各省数据和坐标 阿里云可视化 效果 使用echart画中国地图&#xff0c;步骤如下 1.安装依赖 npm i echarts4 创建一个js文件 当你可以访问https请求的时候则使用&#xff0c;如下代码 import axios from "axios"; export default a…
阅读更多...
网络安全SSRF漏洞 检测

网络安全SSRF漏洞 检测

SSRF 检测的一些思考 DNS 平台没有立刻收到请求&#xff0c;是在之后的某个时间段收到了不同的请求信息&#xff0c;这至少表明了一点&#xff0c;此处存在有无回显的 SSRF&#xff0c;虽然想要证明有更大的危害比较困难&#xff0c;但是至少说明了存在有 SSRF 的风险&#xf…
阅读更多...
AI机器人ChatGPT使用体验（注册，使用，简易方式）

AI机器人ChatGPT使用体验（注册，使用，简易方式）

最近ChatGPT很火 号称下一代搜索引擎 吊打谷歌百度 它可以做到代替很多职业 究竟有多厉害呢&#xff1f; 看看这个例子&#xff1a; 你问他答&#xff0c;是不是感觉啥都知道&#xff1f; 文员、程序员全被打败 这个究竟怎么用呢&#xff1f; 注册 国内99%的人都卡在了…
阅读更多...
超详细Docker的安装以及Docker部署C++

超详细Docker的安装以及Docker部署C++

系列文章目录 这学期&#xff0c;学校开了一门云计算大数据课程&#xff0c;老师要求从OpenStack、Hadoop、Docker等软件进行部署一个框架。 我去从中选择了一个Docker&#xff0c;来对这个作业进行实现。以下就是我对这次作业的实现过程以及注意事项&#xff0c;还有犯的错误总…
阅读更多...
牛客网Verilog刷题——VL27

牛客网Verilog刷题——VL27

牛客网Verilog刷题——VL27 题目答案 题目 请编写一个序列检测模块&#xff0c;检测输入信号&#xff08;a&#xff09;是否满足011100序列&#xff0c; 要求以每六个输入为一组&#xff0c;不检测重复序列&#xff0c;例如第一位数据不符合&#xff0c;则不考虑后五位。一直到…
阅读更多...
【C++】反向迭代器的设计

【C++】反向迭代器的设计

前言 STL中不少的容器需要有迭代器这样的设计&#xff0c;特别是正向迭代器&#xff0c;几乎每个容器都有自己的特定实现方式&#xff0c;有了正向迭代器之后&#xff0c;我们还要提供反向迭代器以供一些特殊的需求&#xff0c;但是许多容器的正向迭代器实现的方式不一样&#…
阅读更多...
华东师范大学副校长周傲英：未来，中国需要什么样的数据库？

华东师范大学副校长周傲英：未来，中国需要什么样的数据库？

本文为华东师范大学副校长&#xff0c;CCF 会士周傲英教授在第一届 OceanBase 开发者大会带来的分享。欢迎访问 OceanBase 官网获取更多信息&#xff1a;https://www.oceanbase.com/ 3 月 25 日&#xff0c;第一届 OceanBase 开发者大会在北京举行&#xff0c;华东师范大学副校…
阅读更多...
AI智能智能课程第四讲 -数据库领域专家

AI智能智能课程第四讲 -数据库领域专家

使用chatGPT让你成为数据库领域专家 作业 现在要测试电商的下单功能&#xff1a;测试员张三在公司的电商平台上下了几个单&#xff0c;现在需要验证&#xff1a;张三这个客户下单的所有订单信息&#xff0c;包含订单编号&#xff0c;商品名称&#xff0c;商品价格&#xff0c;…
阅读更多...
什么是gpt4-如何用上gpt-4

什么是gpt4-如何用上gpt-4

gpt4主要强化了哪些功能 OpenAI尚未公布GPT-4的详细信息&#xff0c;不过可以根据OpenAI前CEO Sam Altman在2020年所发表的一篇博客中提到的&#xff0c;GPT-4可能会具有更强大和智能的能力&#xff0c;包括更准确的理解和表达自然语言、更高效的记忆和推理、更全面的知识和视…
阅读更多...
thinkphp:数值（保留小数点后N位，四舍五入，左侧补零，格式化货币，取整，生成随机数，数字与字母进行转换）

thinkphp:数值（保留小数点后N位，四舍五入，左侧补零，格式化货币，取整，生成随机数，数字与字母进行转换）

一、保留小数点后N位/类似四舍五入&#xff08;以保留小数点后三位为准&#xff09; number_format()函数&#xff1a;第一个参数为要格式化的数字&#xff0c;第二个参数为保留的小数位数 方法一&#xff1a; public function test() {$num 12.56789; // 待格式化的数字$r…
阅读更多...
Maven配置阿里云仓库

Maven配置阿里云仓库

Maven简介&#xff1a; Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具软件。 Maven 除了以程序构建能力为特色之外&#xff0c;还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性&#x…
阅读更多...
QMS-云质说质量 - 11 我和我的客户投诉(3) - 明枪易躲 暗箭难防

QMS-云质说质量 - 11 我和我的客户投诉(3) - 明枪易躲 暗箭难防

云质QMS原创 转载请注明来源 作者&#xff1a;王洪石 君子思义 小人贪利 金庸老先生在《笑傲江湖》中写道&#xff0c;“只要有人的地方就有恩怨&#xff0c;有恩怨就会有江湖&#xff0c;人就是江湖。”这句话映射到现实社会中&#xff0c;就是“社会险恶&#xff0c;人心叵测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023