React学习总结(三)之React探索

1.create-react-app脚手架的应用及优化

1.create-react-app是一个命令行工具,用于快速生成基于React的单页面应用程序的脚手架。

2.全局安装第三方脚手架

npm install -g create-react-app

3.创建项目

create-react-app <project_name>

4.暴露配置文件(执行后可看到config文件夹)

npm run eject

5.启动项目(记得切换到项目目录中去)

npm start

小贴士:

安装出现request to https://registry.npm.taobao.org/webpack failed,

可以npm config set registry https://registry.npmjs.org/解决

优化:

1.npm run eject

通过命令将create-react-app配置暴露出来,然后修改webpack和babel配置

2.优化图片和字体加载

3.代码分割

2.jsx的基础知识和实战应用

概念:JSX是Javascript XML(HTML)的缩写,表示在JS代码中书写HTML结构

作用:在React中创建HTML结构(页面UI结构)

优势:

1.采用类似于HTML的语法,降低学习成本,会HTML就会JSX

2.充分利用JS自身可编程能力创建HTML结构

(JSX并不是标准的JS语法,是js的语法扩展,浏览器默认是不识别的,脚手架中内置的@babel/plugin-ttansform-react-jsx包,用来解析该语法)

JSX的注意事项:

1.JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代

2.所有标签必须形成闭合,成对闭合或者自闭合都可以

3.JSX的语法更加贴近JS语法,属性名采用驼峰命名法className -> htmlFor

4.JSX支持多行(换行),如果需要换行,需使用()包裹,防止Bug出现

    1.JSX列表渲染:页面的构建离不开重复的列表结构,比如商品列表等,vue中用的是v-for,react是使用数组map的方法

const songs = [{id: 1, name: '痴心绝对'},{id: 2, name: '像我这样的人'},{id: 3, name: '南山南'}
]
function App () {return (<div className="App><ul>{songs.map(item =>  <li>{item.name}</li> )}</ul></div>)
}

      2.JSX条件渲染:根据是否满足条件生成HTML结构,比如Loading效果,可以使用三元运算符或逻辑与(&&)运算符

const flag = true 
function App () {return (<div className="App">{flag ? 'react真有趣' : 'vue真有趣'}{flag ? <span>this is span</span> : null}</div>)
}

     3.JSX样式处理

// 1.行内样式
function App () {return (<div className="App"><div style={{color: 'red'}}>this is a div</div></div>)
}// 2.行内样式-更优写法
const styleObj = {color: red
}function App () {return (<div className="App"><div style={styleObj}>this is a div</div></div>)
}// 3.类名-className(推荐)
// app.css
.title{font-size: 30px;color: blue;
}//app.js
import './app.css'
fucntion App () {return (<div className="App"><div className='title'>this is a div</div></div>)
}// 4.类名-className-动态类名控制
import './app.ccs'
const showTitle = true
function App () {return (<div className="App"><div className={showTitle ? 'title' : ''}>this is a div</div></div>)
}

3.受控和非受控组件属性深入分析

受控组件和非受控组件是React中两种处理表单元素的方式,两者的区别如下:

受控组件:受控组件是指由React控制表单元素的值和状态的组件。在受控组件中,表单元素的值由React组件的状态(state)管理,并通过事件监听和回调函数来更新状态,每当用户输入内容或选择选项时,都会触发相应的事件处理函数,从而更新组件的状态和表单元素的值。例如,在React中,一个受控的输入框的值会通过其value属性绑定到某个状态(state),并且当用户输入时,onChange事件会被触发以更新该状态,进而重新渲染组件。受控组件适用于需要对用户输入进行验证和处理的表单,以及表单元素之间有复杂的关联关系需要根据其他输入的值动态更新的场景。

非受控组件:非受控组件则是指表单元素的值不由React状态控制的组件,其值通常由DOM自身维护。在非受控组件中,可以通过ref获取表单元素的值,并在需要时手动获取或设置其值。非受控组件适用于表单元素的值不需要进行验证或处理的场景,以及对表单元素的值进行直接访问或操作的场景。

总的来说,选择使用受控组件或非受控组件应根据实际需求进行判断。对于大部分表单场景,推荐使用受控组件以获得更好的可维护性和可控性,而在某些简单场景下,或者需要操作大量表单元素时,才考虑使用非受控组件以简化代码。

4.react合成事件和双向数据绑定

react合成事件:是react模拟的一种事件处理方式,为了解决跨浏览器的兼容性问题。当用户与DOM交互时,React会通过一个称为“合成事件”的系统来管理事件。

react合成事件如下:onChange,onClick,onDoubleClick,onMouseDown,onMouseUp,

onMouseEnter,onMouseLeave, onMouseMove,onMouseOver,onKeyUp,onKeyDown,onkeyPress,onScroll,onWheel,onCopy,onCut,onPaste,onLoad,onError

5.函数式组件及React Hooks

6.类组件及声明周期函数(Component & Pure Component)

7.复合组件和组件嵌套

8.基于上下文(React.createContext)实现组件信息通信

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三台电机的顺启逆停

1&#xff0c;开启按钮输入信号是 电机一开始启动&#xff0c;5秒回电机2启动 &#xff0c;在5秒电机三启动 关闭按钮输入时电机3关闭 &#xff0c;5秒后电机2关闭 最后电机一关闭 2&#xff0c;思路开启按钮按下接通电机1 并且接通定时器T0 定时器T0 到时候接通电机2 并且开…

小米su7定价21.59万元对汽车市场的影响

小米su7作为小米公司首款量产汽车&#xff0c;定价21.59万元&#xff0c;对汽车市场的影响不可忽视。本文将从三个方面进行分析。 首先&#xff0c;小米su7的定价对汽车市场的竞争格局产生了影响。在过去的几十年中&#xff0c;市场上以传统汽车厂商为主导&#xff0c;汽车定价…

Predict the Next “X” ,第四范式发布先知AIOS 5.0

今天&#xff0c;第四范式发布了先知AIOS 5.0&#xff0c;一款全新的行业大模型平台。 大语言模型的原理是根据历史单词去不断预测下一个单词&#xff0c;换一句常见的话&#xff1a;Predict the Next “Word”。 当前对于行业大模型的普遍认知就是沿用这种逻辑&#xff0c;用大…

HTML 中的 JavaScript 操作指南:基础语法与BOM、DOM操作

一、JavaScript的简介 JavaScript 是一种高级的、解释型的编程语言&#xff0c;主要用于在网页上实现交互式的功能。网页开发唯一可用语言&#xff0c;增加网页动态性与交互性。学习JavaScript可以分为三个部分 ECMAScript&#xff1a;js的基础语法BOM&#xff1a;浏览器 对象…

聊聊多版本并发控制(MVCC)

多版本并发控制&#xff08;MVCC&#xff09; MVCC一直是数据库部分的高频面试题&#xff0c;这篇文章来聊聊MVCC是什么&#xff0c;以及一些底层原理的实现。 当前读和快照读&#xff1a; 当前读&#xff1a;读取的是事务最新的版本&#xff0c;读取的过程中其他并发事务不…

SpringBoot学习记录(1)

1. 注解 (1) RestController RestController 是一个组合注解&#xff0c;包含了Controller 和ResponseBody 两个注解的功能。 用RestController 标记的类表示这是一个RESTful 风格的控制器&#xff0c;它可以处理HTTP请求并返回JSON格式的响应。 controller&#x…

全栈的自我修养 ———— uniapp中封装api请求

api import request from /tools/request export function login(loginMessage) {return request({url: /login,data: loginMessage,loading: true}) }request // request const urlArr {DEV: http://localhost:6060, // 开发PRO: https://域名:6060, // 生产 }let BASEURL …

适用于 Windows 的 6 个最佳视频转换器

视频转换器可以帮助您在设备上转换和播放不受支持的视频格式。它还可以方便地减小视频文件大小、以通用格式组织所有视频或与其他人共享文件以在不同设备上播放。 Windows 有大量视频转换器可供选择。虽然有些是免费的&#xff0c;但其他一些则提供迎合专业用户的高级功能。在…

Android 二维码相关(三)

Android 二维码相关(三) 本篇文章主要讲下二维码扫描相关. 1: 权限相关 由于文中需要使用Camera以及surfaceview,所以我们需要提前申请相机权限: <uses-permission android:name"android.permission.CAMERA" />2: 添加SurfaceView预览 <?xml version&…

【DETR系列目标检测算法代码精讲】01 DETR算法01 DETR算法框架和网络结构介绍

为什么要有DETR 总所周知&#xff0c;传统的目标检测算法非常依赖于anchor和nms等手工设计操作&#xff0c;非常费时费力&#xff0c;自然而然的就产生了取消这些操作的想法。但是我们首先需要思考的是&#xff0c;为什么我们需要anchor和nms&#xff1f; 因为我们是没有指定…

Altium Designer许可需求分析

在电子设计的世界中&#xff0c;Altium Designer已成为设计师们的得力助手。然而&#xff0c;如何进行有效的许可需求分析&#xff0c;以确保软件的高效使用和企业的可持续发展&#xff1f;本文将带您了解如何进行Altium Designer的许可需求分析&#xff0c;让您在设计的道路上…

安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 从0开始 工具操作解析【三】

同类博文; 安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 工具操作解析 安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 工具操作解析【二】-CSDN博客 回顾以往 在以前的博文简单介绍了这款工具的rom制作全程。今天针对这款工具的…

【Java多线程】8——CompletableFuture

8 CompletableFuture ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个s…

【UI框架】——保姆式使用教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

win11 环境配置 之 Jmeter(JDK17版本)

一、安装 JDK 1. 安装 jdk 截至当前最新时间&#xff1a; 2024.3.27 jdk最新的版本 是 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/ 建议下载 jdk17 另存为到该电脑的 D 盘下&#xff0c;新建jdk文件夹 开始安装到 jdk 文件夹下 2. 配…

Java23种常见设计模式汇总

七大原则网站地址&#xff1a;设计模式7大原则&#xff0b;类图关系-CSDN博客 创建型设计模式&#xff1a;创建型设计模式合集-CSDN博客 七大结构型设计模式&#xff1a;7大结构型设计模式-CSDN博客 11种行为型设计模式&#xff1a; 11种行为型模式&#xff08;上&#xff0…

Oracle 19c 高可用部署实战系列之Data Guard理论与实战

课程介绍 Oracle Data Guard确保企业数据的高可用性、数据保护和灾难恢复。 Oracle Data Guard提供了一组全面的服务&#xff0c;用于创建、维护、管理和监视一个或多个备用数据库&#xff0c;使生产Oracle数据库能够在灾难和数据损坏中幸存下来。Oracle Data Guard将这些备用…

我于窗中窥月光,恰如仰头见“链表”(Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Python计算物理粒子及拉格朗日和哈密顿动力学

&#x1f3af;要点 运动和计算&#xff0c;牛顿运动定律&#xff0c;&#x1f3af;Python符号计算粒子速度随时间变化的微分方程&#xff0c;并绘制运动趋势图。单粒子一维物理运动&#xff0c;数学方程表示和计算&#xff1a;&#x1f3af;在重力作用下和空气阻力为线性&…

java项目通用Dockerfile

创建Dockerfile文件&#xff0c;放到项目根目录下和pom.xml同级别 仅需修改为自己项目端口号即可&#xff0c;其他的无需改动 FROM openjdk:11.0.11-jre-slimCOPY target/*.jar .EXPOSE 8080ENTRYPOINT java -jar *.jar构建语句(注意末尾的点 . ) docker build -t container…