当前位置: 首页 > news >正文

react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot

react的设计模式

  1. React 是 mvc 体系,vue 是 mvvm 体系
    • mvc: model(数据)-view(视图)-controller(控制器)
      1. 我们需要按照专业的语法去构建 app 页面,react 使用的是 jsx 语法
      2. 构建数据层,需要动态处理的的数据都要数据层支持
      3. 控制层: 当我们需要在视图中进行数据更新时,需要控制层去修改相关数据,然后 react 框架会根据数据的变化去更新视图
        数据驱动视图的渲染 => 单向驱动
        视图中的表单内容改变,想要修改数据,需要开发者自己去写事件监听函数,然后修改数据
    • mvvm: model(数据)-view(视图)-viewModel(视图模型监听层)
      1. 数据驱动视图渲染:监听数据的更新,当数据更新时,视图自动渲染
      2. 视图驱动数据的更新: 监听页面中表单元素的内容改变,自动去修改数据
        双向驱动

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 表达式,包括函数调用,变量引用,三目运算,逻辑运算等
不包括语句,如 iffor,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 体系&#xff0c;vue 是 mvvm 体系 mvc: model(数据)-view(视图)-controller(控制器) 我们需要按照专业的语法去构建 app 页面&#xff0c;react 使用的是 jsx 语法构建数据层&#xff0c;需要动态处理的的数据都要数据层支持控制层: 当我们需要…...

牛客周赛 Round 60 折返跑(组合数学)

题目链接&#xff1a;题目 大意&#xff1a; 在 1 1 1到 n n n之间往返跑m趟&#xff0c;推 m − 1 m-1 m−1次杆子&#xff0c;每次都向中间推&#xff0c;不能推零次&#xff0c;问有多少种推法&#xff08;mod 1e97&#xff09;。 思路&#xff1a; 一个高中学过的组合数…...

深入浅出Java匿名内部类:用法详解与实例演示

匿名内部类&#xff08;Anonymous Inner Class&#xff09;在Java中是一种非常有用的特性&#xff0c;它允许你在一个类的定义中直接创建并实例化一个内部类&#xff0c;而不需要为这个内部类指定一个名字。匿名内部类通常用于以下几种情况&#xff1a; 实现接口&#xff1a;当…...

数据库MySQL、Mariadb、PostgreSQL、MangoDB、Memcached和Redis详细介绍

以下是一些常见的后端开发数据库选型&#xff1a; 关系型数据库&#xff08;RDBMS&#xff09;&#xff1a;关系型数据库是最常见的数据库类型&#xff0c;使用表格和关系模型来存储和管理数据。常见的关系型数据库包括MySQL、PostgreSQL和Oracle等。这些数据库适合处理结构化数…...

【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计:以全球不透水面积为例

【ArcGIS Pro实操第七期】批量裁剪&#xff1a;以全球不透水面积为例 准备&#xff1a;数据下载ArcGIS Pro批量裁剪数据集1 数据拼接2 数据裁剪3 数据统计&#xff1a;各栅格取值3.1 栅格计算器-精确提取-栅格数据特定值3.2 数据统计 4 不透水面积变化分析 参考 准备&#xff1…...

【Linux】Image、zImage与uImage的区别

1、Image 1.1 什么是 Image Image 是一种未压缩的 Linux 内核镜像文件&#xff0c;包含了内核的所有代码、数据和必要的元信息。它是 Linux 内核在编译过程中生成的一个原始的二进制文件&#xff0c;未经过任何压缩或额外的封装处理。由于未压缩&#xff0c;Image 文件相对较…...

算子加速(3):自定义cuda扩展

需要自定义某个层,或有时候用c++实现你的操作(c++扩展)可能会更好: 例如:需要实现一个新型的激活函数例如: bevfusion用cuda实现bevpool加速自定义扩展的步骤 (1) 首先用纯pytorch和python 实现我们所需的功能,看看效果再决定要不要进一步优化(2) 明确优化方向,用C++ (或CU…...

信息安全数学基础(14)欧拉函数

前言 在信息安全数学基础中&#xff0c;欧拉函数&#xff08;Eulers Totient Function&#xff09;是一个非常重要的概念&#xff0c;它与模运算、剩余类、简化剩余系以及密码学中的许多应用紧密相关。欧拉函数用符号 φ(n) 表示&#xff0c;其中 n 是一个正整数。 一、定义 欧…...

7-17 汉诺塔的非递归实现

输入样例: 3输出样例: a -> c a -> b c -> b a -> c b -> a b -> c a -> c 分析&#xff1a; 不会汉罗塔的uu们&#xff0c;先看看图解&#xff1a; 非递归代码&#xff1a; #include<iostream> #include<stack> using namespace std; s…...

word文档无损原样转pdf在windows平台使用python调用win32com使用pip安装pywin32

前提&#xff1a; windows环境下&#xff0c;并且安装了office套装&#xff0c;比如word,如果需要调用excel.也需要安装。在另外的文章会介绍。这种是直接调用word的。所以还原度会比较高。 需求&#xff1a; word文档转pdf,要求使用命令行形式&#xff0c;最终发布为api接口…...

海康威视相机在QTcreate上的使用教程

文章目录 前言&#xff1a;基础夯实&#xff1a;效果展示&#xff1a;图片展示&#xff1a;视频展示&#xff1a; 参考的资料&#xff1a;遇到问题&#xff1a;问题1&#xff1a;int64 does not问题2&#xff1a;LNK2019配置思路(这个很重要)配置关键图片&#xff1a;配置具体过…...

进程状态、进程创建和进程分类

文章目录 进程进程常见的状态进程调度进程状态变化关系 进程标识示例--进程标识的使用以及简介 进程创建fork函数vfork函数示例--使用fork函数创建子进程&#xff0c;并了解进程之间的关系 创建进程时发生的变化虚拟内存空间的变化示例--验证fork函数创建进程时的操作 对文件IO…...

java后端请求调用三方接口

java后端请求调用三方接口 /*** param serverURL http接口地址&#xff08;例&#xff1a;http://www.iwsu.top:8016/dataSyn/bay/statsCar&#xff09;* param parm 参数&#xff08;可以是json&#xff0c;也可以是json数组&#xff09;*/ public void doRestfulPostBody(St…...

C#使用TCP-S7协议读写西门子PLC(三)

接上篇 C#使用TCP-S7协议读写西门子PLC(二)-CSDN博客 这里我们进行封装读写西门子PLC的S7协议命令以及连接西门子PLC并两次握手 新建部分类文件SiemensS7ProtocolUtil.ReadWrite.cs 主要方法&#xff1a; 连接西门子PLC并发送两次握手。两次握手成功后&#xff0c;才真正连…...

铝型材及其常用紧固件、连接件介绍

铝型材介绍&#xff08;包括紧固件和连接件以及走线&#xff09; 铝型材 铝型材一般是6063铝合金挤压成型&#xff0c;分为欧标和国标两个标准。&#xff08;左边国标&#xff0c;右边欧标&#xff0c;欧标槽宽一点&#xff09; 由于槽型不一样&#xff0c;相关的螺栓和螺母也…...

【裸机装机系列】7.kali(ubuntu)-安装开发所需工具

如果你是后端或是人工智能AI岗&#xff0c;可以安装以下推荐的软件&#xff1a; 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 标准库与库函数 示例&#xff1a;常见库函数 9.2.2 标准库与头文件的关系 参考资料和学习工具 如何使用库函数 ​编辑 9.3 ⾃定义函数 9.3.1 函数的语法形式 9.3.2函数的举例 9.4 实参与形参 9.4.1 什么是实参&#xff1f; 9…...

1.1 计算机网络基本概述

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言一、网络的基本概念二、集线器、交换机和路由器三、互连网与互联网四、网络的类型五、互连网的组成1. 边缘部分2. 核心部分 六、网络协议 前言 计算机网络是现代信息社会…...

Linux环境基础开发工具使用(gcc/g++与makefile)

1.Linux编译器-gcc/g使用 1. 背景知识 接下来的操作&#xff0c;我以gcc为例&#xff0c;因为两者选项都是通用的&#xff0c;所以也就相当于间接学习了 1.预处理&#xff08;进行宏替换) 2.编译&#xff08;生成汇编) 3.汇编&#xff08;生成机器可识别代码&#xff09;…...

PointNet++改进策略 :模块改进 | EdgeConv | DGCNN, 动态图卷积在3d任务上应用

目录 介绍核心思想及其实现核心思想实现步骤 如何改进PointNet**局部几何结构的处理****动态图的引入****特征聚合的灵活性****全局和局部特征的结合** 论文题目&#xff1a;Dynamic Graph CNN for Learning on Point Clouds发布期刊&#xff1a;TOG作者单位&#xff1a;麻省理…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...