React回顾

 一、基础

 1、使用babel解析

2、不直接使用jsx,jsx写起来很繁琐

3、jsx语法规则

4、函数式组件的使用

 5、函数式组件渲染

6、类组件渲染

7、类组件中事件调用this指向问题

8、类组件不能直接改变状态

 

9、props接收数据类型限制

 类型限制放到类组件内部,用static关键字

 10、ref的使用

 字符串ref:不推荐使用

回调ref(内联函数),更新会执行两次,第一次参数为null,第二次才是dom,这个无关紧要。

要想只执行一次,就不能写成内联函数,要把函数写到类上,用this调用才行;

createRef的使用

react改写了原生的事件分析:

 11、jsx注释

12、受控组件与非受控组件

受控组件:组件内有状态存储变量

非受控组件:表单的值现用现取

13、高阶函数、函数柯理化

14、生命周期函数(旧)

15、生命周期函数(新)

相比旧版新增了2个,删除了3个

 getSnapshotBeforeUpdate钩子的应用场景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
</head>
<style>.list{width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news{height:30px;}
</style>
<body><div id="app"></div><script type="text/babel">class MyDom extends React.Component{state = {newsArr:[],mouseType:false}mouseIn=()=>{console.log('aa')this.setState({mouseType:true})}mouseOut=()=>{console.log('bb')this.setState({mouseType:false})}componentDidMount(){// console.log('componentDidMount')setInterval(()=>{const {newsArr} = this.state;const news = '新闻'+(newsArr.length+1)this.setState({newsArr:[news,...newsArr]})},1000)}getSnapshotBeforeUpdate(){// console.log('getSnapshotBeforeUpdate')return this.refs.list.scrollHeight;}componentDidUpdate(preProps,preState,height){// console.log('组件更新完成','componentDidUpdate');if(this.state.mouseType){this.refs.list.scrollTop+=this.refs.list.scrollHeight-height;}else{this.refs.list.scrollTop = 0}}render(){// console.log('render函数')const arr = this.state.newsArr.map((item,index)=>{return <div className="news" key={index}>{item}</div>})return (<div className="list" ref="list" onMouseOver={this.mouseIn} onMouseLeave={this.mouseOut}>{arr}</div>)}}ReactDOM.render(<MyDom/>,document.getElementById("app"))</script>
</body>
</html>

16、脚手架介绍

17、好用的快捷键插件介绍

ES7 React/Redux/GraphQL/React-Native snippets

// ES7 React/Redux/GraphQL/React-Native snippets 快捷键

// rcc  类组件

// rfc 函数组件

// imrc 引入react

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

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

相关文章

汽车油封的重要性

在汽车运行中&#xff0c;某些部件&#xff0c;如发动机或变速箱&#xff0c;相当于主角。然而&#xff0c;也有一些小不点在幕后发挥着至关重要的作用。不起眼的油封就是这样的组件之一。 1、油封的作用 油封&#xff0c;也称为旋转轴密封件&#xff0c;是提高汽车性能的重要…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的生活垃圾检测与分类系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本篇博客详细讲述了如何利用深度学习构建一个生活垃圾检测与分类系统&#xff0c;并且提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并进行了与前代算法YOLOv7、YOLOv6、YOLOv5的细致对比&#xff0c;展示了其在图像、视频、实时视频流和批量…

刷题第六天

代码随想录刷题第六天 | 454.四数相加II 383. 赎金信 15. 三数之和 18. 四数之和 454.四数相加II 这个题分完组之后和两数其实差不多 得重新复习STL了&#xff0c;好多东西全忘了&#xff0c; class Solution { public:int fourSumCount(vector<int>& nums1, vect…

Day03:Web架构OSS存储负载均衡CDN加速反向代理WAF防护

目录 WAF CDN OSS 反向代理 负载均衡 思维导图 章节知识点&#xff1a; 应用架构&#xff1a;Web/APP/云应用/三方服务/负载均衡等 安全产品&#xff1a;CDN/WAF/IDS/IPS/蜜罐/防火墙/杀毒等 渗透命令&#xff1a;文件上传下载/端口服务/Shell反弹等 抓包技术&#xff1a…

非线性优化资料整理

做课题看了一些非线性优化的资料&#xff0c;整理一下&#xff0c;以方便查看&#xff1a; 优化的中文博客 数值优化|笔记整理&#xff08;8&#xff09;——带约束优化&#xff1a;引入&#xff0c;梯度投影法 (附代码)QP求解器对比对于MPC的QP求解器 数值优化| 二次规划的…

Flask中使用日志库loguru

文章目录 README.mdapp.pyconfig.py参考资料 关于日志记录库loguru的介绍&#xff0c;具体可参见之前的博客&#xff1a;Python日志记录库——loguru 今天来介绍下&#xff0c;如何在Flask中使用loguru日志库。 README.md This is a simple example of how to use loguru in…

【Godot4自学手册】第十七节主人公的攻击和敌人的受伤

本节主要学习主人公是如何向敌人发起进攻的&#xff0c;敌人是如何受伤的&#xff0c;受伤时候动画显示&#xff0c;击退效果等。其原理和上一节内容相同&#xff0c;不过有许多细节需要关注和完善。 一、修改Bug 在本节学习之前&#xff0c;我将要对上一节的代码进行完善&am…

租赁系统|租赁软件提供免押金等多种租赁方式

租赁小程序是一种全新的租赁模式&#xff0c;为用户提供了免押金、多种租赁方式、定制化服务等多项优势&#xff0c;让用户的租赁体验更加美好。让我们来了解一下它的特点和功能。 首先&#xff0c;租赁小程序支持租完即送&#xff0c;无需等待固定租期。它提供了多种租赁方式&…

bash和sh和./的区别

bash和sh和./的区别 今天在执行一个脚本的时候&#xff0c;用的是sh script.sh&#xff0c;执行报错&#xff0c;使用bash script.sh执行时就能成功&#xff0c;才知道sh和bash是不一样的 sh sh表示 Bourne Shell&#xff0c;是 Unix 系统上的一种基本的命令解释器。它也可以…

GPT与MBR:硬盘分区表格式的革新与区别

概述 在计算机存储领域&#xff0c;硬盘分区是管理数据和操作系统部署的基础。两种广泛使用的分区表格式——MBR&#xff08;Master Boot Record&#xff09;和GPT&#xff08;GUID Partition Table&#xff09;&#xff0c;各自代表了不同的技术阶段和发展需求。本文将详细介…

NR 2-STEP RA Absolute Timing Advance Command MAC CE的应用场景

3 GPP在 R2-2002413中将2-step RA引入&#xff0c;进而R16 38.321出现了 Absolute TAC MAC CE&#xff0c;在 NR Timing Advance(TA)_ntn rrc-CSDN博客 有提到这个MAC CE&#xff0c;当时以“absolute timing advance command MAC CE 在2-step RA的某个场景下使用”一笔带过&am…

python使用unittest进行单元测试

文章目录 示例程序更多assert方法 通过一种规范的测试方法&#xff0c;可以帮助我们在修改程序后能够快速的检测一些bug&#xff0c;使用unittest库的方法如下&#xff1a; 示例程序 import unittestclass Demo01(unittest.TestCase):classmethoddef setUpClass(self) -> …

设计模式----装饰器模式

在软件开发过程中&#xff0c;有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下&#xff0c;可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。 装饰器模式 允许向一个现有的对象添加新的功能&#xff0c;同时又不改变他的…

MQTT协议解析:揭秘固定报头、可变报头与有效载荷的奥秘

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;是一种轻量级的通讯协议&#xff0c;常用于远程传感器和控制设备的通讯。MQTT协议基于发布/订阅模式&#xff0c;为大量计算能力有限且工作在低带宽、不可靠网络环境中的设备…

Java集合基础梳理(集合体系+ArrayList)

目录 Java集合体系 为什么要使用集合类 ? 如何选用集合? 哪些集合类是线程安全的&#xff1f;哪些不安全&#xff1f; 快速失败(fail-fast)和安全失败(fail-safe)的区别是什么&#xff1f; 遍历的同时修改一个List有几种方式 ArrayList 如何进行元素的遍历操作&#x…

Spring Boot项目误将Integer类型写成int来进行传参

在处理项目中Idea中无报错&#xff1a; 问题&#xff1a; localhost:8080/param/m2在浏览器中输入&#xff1a;localhost:8080/param/m2 产生报错&#xff1a; This application has no explicit mapping for /error, so you are seeing this as a fallback. Tue Feb 27 20:55…

Android PMS——系统更新和版本管理(十三)

当 Android 系统进行升级时,PMS(Package Manager Service)在系统更新和版本管理中扮演着关键角色。PMS 负责确保应用程序在新的系统版本上能够正常运行,这涉及到一系列的适配流程,具体如下: 检测不兼容应用:在系统升级过程中,PMS首先会扫描已安装的应用程序,识别出那些…

git上传了一个文件到远程仓库里面,之后如何忽略它

我们可能会遇到这种情况&#xff0c;因为一些失误或者别人的粗心&#xff0c;将一些本地的文件上传到了远程仓库&#xff0c;而且这个文件是环境相关的&#xff0c;随着不同开发者的环境&#xff0c;编译器会动态修改&#xff0c;从而导致每个人都不同 在提交过程中相互覆盖&a…

Redis哨兵模式和Redis Cluster模式

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容Redis Cluster 模式支持自动故障转移功能吗&#xff1f;Redis Cluster 模式支持自动故障转移功能和哨兵有什么区别&#xff1f;Redis Cluster 模式和哨兵模式&#xff08;Sentinel&#xff09;在自动故障转移方面有一些关键…

Java最新面试宝典 SpringMVC面试题)

Java最新面试宝典 SpringMVC面试题 前言1、什么是SpringMVC&#xff1f;2、SpringMVC 的优点&#xff1f;3、Spring MVC配置步骤&#xff1f;4、SpringMVC工作原理了解吗&#xff1f;5、Spring MVC 核心组件的功能&#xff1f;6、B/S 系统标准的三层架构是什么&#xff1f;7、C…