react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot
react的设计模式
- React 是 mvc 体系,vue 是 mvvm 体系
- mvc: model(数据)-view(视图)-controller(控制器)
- 我们需要按照专业的语法去构建 app 页面,react 使用的是 jsx 语法
- 构建数据层,需要动态处理的的数据都要数据层支持
- 控制层: 当我们需要在视图中进行数据更新时,需要控制层去修改相关数据,然后 react 框架会根据数据的变化去更新视图
数据驱动视图的渲染=>单向驱动
视图中的表单内容改变,想要修改数据,需要开发者自己去写事件监听函数,然后修改数据
- mvvm: model(数据)-view(视图)-viewModel(视图模型监听层)
- 数据驱动视图渲染:监听数据的更新,当数据更新时,视图自动渲染
- 视图驱动数据的更新: 监听页面中表单元素的内容改变,自动去修改数据
双向驱动
- mvc: model(数据)-view(视图)-controller(控制器)
jsx 语法
- jsx: javascript xml,就是把 html 和 javascript 结合起来写
function App() {useEffect(() => {console.log(process.env);// 请求接口fetch("/api/v1/users").then((res) => res.json()).then((res) => console.log(res));}, []);/*** 直接显示的静态组件*/const oBox = <h2>这是一个标题</h2>;/*** 需要传参的组件*/const oBox2 = function (title) {return <h2>这是一个标题,{title}</h2>;};return (<div className="App"><h1>Hello World</h1>{oBox}{oBox2("Hello jsx")}<p>当前的环境是:{process.env.NODE_ENV}</p><p>当前的环境是:{process.env.REACT_APP_API_URL}</p></div>);
}

{}支持 js 表达式,包括函数调用,变量引用,三目运算,逻辑运算等
不包括语句,如 if、for,while 等
ReactDOM.createRoot(document.getElementById("root")).render(<App />)不能把 body,html 作为根节点渲染,需要我们自己创建 div 作为根节点- 组件名必须大写,否则会报错
- 一个组件中只能有一个根节点,如果有多个根节点,需要使用
fragment包裹,或者使用div包裹,<></>也是fragment的语法糖
在jsx中写入不同的数据的展示

function App() {useEffect(() => {console.log(process.env);// 请求接口fetch("/api/v1/users").then((res) => res.json()).then((res) => console.log(res));}, []);const oBox = <h2>这是一个标题</h2>;const oBox2 = function (title) {return <h2>这是一个标题,{title}</h2>;};return (<div className="App"><h1>Hello World</h1>{oBox}{oBox2("Hello jsx")}{/* 支持字符串 */}{"hello react"}{/* 支持数组 */}<p>{[1, 2, 3, 4, 5]}</p>{/* 支持表达式 */}{1 + 3}{null}{undefined}{/* 不支持 object*/}<p>{{ name: "zs", age: 25 }}</p><p>当前的环境是:{process.env.NODE_ENV}</p><p>当前的环境是:{process.env.REACT_APP_API_URL}</p></div>);
}




相关文章:
react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot
react的设计模式 React 是 mvc 体系,vue 是 mvvm 体系 mvc: model(数据)-view(视图)-controller(控制器) 我们需要按照专业的语法去构建 app 页面,react 使用的是 jsx 语法构建数据层,需要动态处理的的数据都要数据层支持控制层: 当我们需要…...
牛客周赛 Round 60 折返跑(组合数学)
题目链接:题目 大意: 在 1 1 1到 n n n之间往返跑m趟,推 m − 1 m-1 m−1次杆子,每次都向中间推,不能推零次,问有多少种推法(mod 1e97)。 思路: 一个高中学过的组合数…...
深入浅出Java匿名内部类:用法详解与实例演示
匿名内部类(Anonymous Inner Class)在Java中是一种非常有用的特性,它允许你在一个类的定义中直接创建并实例化一个内部类,而不需要为这个内部类指定一个名字。匿名内部类通常用于以下几种情况: 实现接口:当…...
数据库MySQL、Mariadb、PostgreSQL、MangoDB、Memcached和Redis详细介绍
以下是一些常见的后端开发数据库选型: 关系型数据库(RDBMS):关系型数据库是最常见的数据库类型,使用表格和关系模型来存储和管理数据。常见的关系型数据库包括MySQL、PostgreSQL和Oracle等。这些数据库适合处理结构化数…...
【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计:以全球不透水面积为例
【ArcGIS Pro实操第七期】批量裁剪:以全球不透水面积为例 准备:数据下载ArcGIS Pro批量裁剪数据集1 数据拼接2 数据裁剪3 数据统计:各栅格取值3.1 栅格计算器-精确提取-栅格数据特定值3.2 数据统计 4 不透水面积变化分析 参考 准备࿱…...
【Linux】Image、zImage与uImage的区别
1、Image 1.1 什么是 Image Image 是一种未压缩的 Linux 内核镜像文件,包含了内核的所有代码、数据和必要的元信息。它是 Linux 内核在编译过程中生成的一个原始的二进制文件,未经过任何压缩或额外的封装处理。由于未压缩,Image 文件相对较…...
算子加速(3):自定义cuda扩展
需要自定义某个层,或有时候用c++实现你的操作(c++扩展)可能会更好: 例如:需要实现一个新型的激活函数例如: bevfusion用cuda实现bevpool加速自定义扩展的步骤 (1) 首先用纯pytorch和python 实现我们所需的功能,看看效果再决定要不要进一步优化(2) 明确优化方向,用C++ (或CU…...
信息安全数学基础(14)欧拉函数
前言 在信息安全数学基础中,欧拉函数(Eulers Totient Function)是一个非常重要的概念,它与模运算、剩余类、简化剩余系以及密码学中的许多应用紧密相关。欧拉函数用符号 φ(n) 表示,其中 n 是一个正整数。 一、定义 欧…...
7-17 汉诺塔的非递归实现
输入样例: 3输出样例: a -> c a -> b c -> b a -> c b -> a b -> c a -> c 分析: 不会汉罗塔的uu们,先看看图解: 非递归代码: #include<iostream> #include<stack> using namespace std; s…...
word文档无损原样转pdf在windows平台使用python调用win32com使用pip安装pywin32
前提: windows环境下,并且安装了office套装,比如word,如果需要调用excel.也需要安装。在另外的文章会介绍。这种是直接调用word的。所以还原度会比较高。 需求: word文档转pdf,要求使用命令行形式,最终发布为api接口…...
海康威视相机在QTcreate上的使用教程
文章目录 前言:基础夯实:效果展示:图片展示:视频展示: 参考的资料:遇到问题:问题1:int64 does not问题2:LNK2019配置思路(这个很重要)配置关键图片:配置具体过…...
进程状态、进程创建和进程分类
文章目录 进程进程常见的状态进程调度进程状态变化关系 进程标识示例--进程标识的使用以及简介 进程创建fork函数vfork函数示例--使用fork函数创建子进程,并了解进程之间的关系 创建进程时发生的变化虚拟内存空间的变化示例--验证fork函数创建进程时的操作 对文件IO…...
java后端请求调用三方接口
java后端请求调用三方接口 /*** param serverURL http接口地址(例:http://www.iwsu.top:8016/dataSyn/bay/statsCar)* param parm 参数(可以是json,也可以是json数组)*/ public void doRestfulPostBody(St…...
C#使用TCP-S7协议读写西门子PLC(三)
接上篇 C#使用TCP-S7协议读写西门子PLC(二)-CSDN博客 这里我们进行封装读写西门子PLC的S7协议命令以及连接西门子PLC并两次握手 新建部分类文件SiemensS7ProtocolUtil.ReadWrite.cs 主要方法: 连接西门子PLC并发送两次握手。两次握手成功后,才真正连…...
铝型材及其常用紧固件、连接件介绍
铝型材介绍(包括紧固件和连接件以及走线) 铝型材 铝型材一般是6063铝合金挤压成型,分为欧标和国标两个标准。(左边国标,右边欧标,欧标槽宽一点) 由于槽型不一样,相关的螺栓和螺母也…...
【裸机装机系列】7.kali(ubuntu)-安装开发所需工具
如果你是后端或是人工智能AI岗,可以安装以下推荐的软件: 1> sublime sublime官网 下载deb文件 安装命令 sudo dpkg -i sublime-text_build-4143_amd64.deb2> vscode 安装前置软件 sudo apt install curl gpg software-properties-common apt-t…...
[C语言]第九节 函数一基础知识到高级技巧的全景探索
目录 9.1 函数的概念 9.2 库函数 9.2.1 标准库与库函数 示例:常见库函数 9.2.2 标准库与头文件的关系 参考资料和学习工具 如何使用库函数 编辑 9.3 ⾃定义函数 9.3.1 函数的语法形式 9.3.2函数的举例 9.4 实参与形参 9.4.1 什么是实参? 9…...
1.1 计算机网络基本概述
欢迎大家订阅【计算机网络】学习专栏,开启你的计算机网络学习之旅! 文章目录 前言一、网络的基本概念二、集线器、交换机和路由器三、互连网与互联网四、网络的类型五、互连网的组成1. 边缘部分2. 核心部分 六、网络协议 前言 计算机网络是现代信息社会…...
Linux环境基础开发工具使用(gcc/g++与makefile)
1.Linux编译器-gcc/g使用 1. 背景知识 接下来的操作,我以gcc为例,因为两者选项都是通用的,所以也就相当于间接学习了 1.预处理(进行宏替换) 2.编译(生成汇编) 3.汇编(生成机器可识别代码)…...
PointNet++改进策略 :模块改进 | EdgeConv | DGCNN, 动态图卷积在3d任务上应用
目录 介绍核心思想及其实现核心思想实现步骤 如何改进PointNet**局部几何结构的处理****动态图的引入****特征聚合的灵活性****全局和局部特征的结合** 论文题目:Dynamic Graph CNN for Learning on Point Clouds发布期刊:TOG作者单位:麻省理…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
