React基础巩固日志1

news2024/11/26 10:01:17

书写了一篇vue3的基础构建之后,不能带着各位一起学习vue3了,因为我要面试上海的前端岗位了,所以从现在开始,我要带着大家一起学习React了。
以下是我使用react书写的要掌握的react的知识点:
**加粗样式
**
那么下面我们就一一通过小demo去逐渐掌握react这个框架,让我们在求职的道路上能够一帆风顺。
1、学习如何创建功能组件和类组件,以及它们之间的区别 使用react框架书写一个属于react的小demo
这个示例将展示一个计数器,它使用类组件来维护状态,并使用函数组件来显示计数器按钮
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
总结:函数组件传值 props里面将text在App组件中初始化之后将值传递给类组件,类组件在拿到值之后将数据渲染到页面上,很显然,类组件是多功能化的,不仅仅可是实现继承祖先的数据,还可以将数据实现渲染。
效果展示:
在这里插入图片描述

下面是类组件和函数组件的官方区别:
主要要以下几个区别:

(1)语法不同、设计思想不同
(2)生命周期、状态变量
(3)复用性:
(4)优缺点

一、语法不同、设计思想不同

函数式组件是函数式编程思想,而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来,屏蔽很多细节,不利于测试。

二、生命周期、状态变量

类式组件:使用state对象定义状态变量,有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数;

函数式组件:没有this,使用一系列的内置hooks实现对应的功能,比如使用useState创建状态变量,使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。

三、复用性

类式组件:使用hoc(高阶组件)、render propss实现组件的逻辑复用、拓展组件的功能。

函数式组件:使用自定义hooks实现组件的逻辑复用。

四、优缺点

函数式组件:

优点:

相对于类式组件,一般情况而言,代码量更少,代码更简洁,可读性更强;
更易于拆分组件和测试;
缺点:

在业务逻辑巨复杂,状态依赖关系错乱的情况下,使用useEffect、useMemo等hooks,对其依赖项数组的思考为开发者带来了更大的心智负担;
不具备处理错误边界等业务情况的hooks;
类式组件:

优点:

功能完备,具有componentDidsCatch、getDerivedStateFromError等钩子函数处理边界错误;
缺点:

在复用性上,hoc组件等会出现诸如嵌套地狱、重名props被覆盖、难以拆分和测试等问题;
五、总结

类式组件和函数式组件各有其优点,关键是看自己的需求是什么;如果你开发的业务逻辑和状态并不复杂,那么类式组件可能会更合适;

但是如果你要处理错误边界或者是业务逻辑巨复杂的情况,那么类式组件更合适;

其实无论是什么技术开发,衡量代码是否优雅的标准无非是开发效率(复用性、易用性)、代码性能、是否易于测试和维护;当然三者常常不可兼得,关键看自己需求是什么

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

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

相关文章

美颜SDK技术对比,深入了解视频美颜SDK的工作机制

如何在实时视频中呈现更加自然、美丽的画面,而这正是美颜SDK技术发挥作用的领域之一。本文将对几种主流视频美颜SDK进行深入比较,以揭示它们的工作机制及各自的优劣之处。 随着科技的不断进步,美颜技术已经从简单的图片处理发展到了视频领域…

【Filament】绘制矩形

1 前言 Filament环境搭建中介绍了 Filament 的 Windows 和 Android 环境搭,绘制三角形中介绍了绘制纯色和彩色三角形,本文将使用 Filament 绘制纯色和彩色矩形。 2 绘制矩形 本文项目结构如下,完整代码资源 → Filament绘制矩形。 2.1 自定义…

【Matlab算法】灰狼优化算法问题(Grey Wolf Optimization)(附MATLAB完整代码)

灰狼优化算法问题 前言算法描述:算法特点: 正文代码实现 前言 灰狼优化算法(Grey Wolf Optimization,GWO) 是一种模拟灰狼社会行为的启发式优化算法。它是由Seyedali Mirjalili等人于2014年提出的,灵感来源…

Acrel-1000DP分布式光伏系统在某重工企业18MW分布式光伏中应用——安科瑞 顾烊宇

摘 要:分布式光伏发电特指在用户场地附近建设,运行方式以用户侧自发自用、余电上网,且在配电系统平衡调节为特征的光伏发电设施,是一种新型的、具有广阔发展前景的发电和能源综合利用方式,它倡导就近发电,就…

React实现全局Loading

css #__loading {position:fixed;top: 0;left: 0;z-index: 99999;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: rgba(0, 0, 0, 0); } 页面代码 使用了antd的Spin组件 import React from react import ReactDOM from re…

C语言入门(字符串正反连接(fgets()、gets()用法))

目录 ​编辑 题目描述 输入格式 输出格式 样例输入 样例输出 解题思路 题目描述 所给字符串正序和反序连接&#xff0c;形成新串并输出 输入格式 任意字符串&#xff08;长度<50&#xff09; 输出格式 字符串正序和反序连接所成的新字符串 样例输入 123abc 样例输出 12…

2023.12.18杂记

今天特地搜了一下国内不错的博客网站&#xff0c;本来想在掘金上写的&#xff0c;但是怕被人喷&#xff08;&#xff0c;所以还是决定在csdn上写了哈哈哈。 这篇文章主要整理一下我今天写代码时遇到的疑惑以及记录一下思考过程吧。 第一个注意的地方&#xff0c;我们的get查询…

前端开发中的webpack打包工具

前端技术发展迅猛&#xff0c;各种可以提高开发效率的新思想和框架层出不穷&#xff0c;但是它们都有一个共同点&#xff0c;即源代码无法直接运行&#xff0c;必须通过转换后才可以正常运行。webpack是目前主流的打包模块化JavaScript的工具之一。 本章主要涉及的知识点有&am…

【PHP入门】2.1-运算符

-运算符- 运算符&#xff1a;operator&#xff0c;是一种将数据进行运算的特殊符号&#xff0c;在PHP中一共有十种运算符之多。 2.1.1赋值运算符 赋值运算&#xff1a;符号是“”&#xff0c;表示将右边的结果&#xff08;可以是变量、数据、常量和其它运算出来的结果&#…

音视频学习(二十一)——rtmp收流(tcp方式)

前言 本文主要介绍rtmp协议收流流程&#xff0c;在linux上搭建rtmp服务器&#xff0c;通过自研的rtmp收流库发起取流请求&#xff0c;使用ffmpegqt实现视频流的解码与播放。 关于rtmp协议基础介绍可查看&#xff1a;https://blog.csdn.net/www_dong/article/details/13102607…

sqlserver dba日常操作

查询慢sql的方法 1.whoisactive 安装方法 http://whoisactive.com/downloads/下载地址 将下载好的zip包放到sqlserver服务器中 文件-打开-文件-下载好的zip包-在查询窗口点击执行 新建一个查询窗口&#xff0c;输入sp_whoisactive&#xff0c;获取当前运行的所有sql语句 使用…

windows 安装jenkins

下载jenkins 官方下载地址&#xff1a;Jenkins 的安装和设置 清华源下载地址&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/jenkins/windows-stable/ 最新支持java8的版本时2.346.1版本&#xff0c;在清华源中找不到&#xff0c;在官网中没找到windows的下载历史&#xff…

ELK(九)—logstash

目录 简介安装部署测试 配置详解编写配置文件连接elasticsearch将数据推送到elasticsearch中。 简介 Logstash 是一个开源的服务器端数据处理管道&#xff0c;由 Elastic 公司维护和开发。它被设计用于从不同来源收集、处理和转发数据&#xff0c;以供 Elasticsearch 进行存储…

Mysql主从复制,读写分离,分表分库策略与实践

本文转自互联网&#xff0c;本文部分内容来源于网络&#xff0c;为了把本文主题讲得清晰透彻&#xff0c;也整合了很多我认为不错的技术博客内容&#xff0c;引用其中了一些比较好的博客文章&#xff0c;如有侵权&#xff0c;请联系作者。 该系列博文会告诉你如何从入门到进阶&…

docker在线安装minio

1、下载最新minio docker pull minio/minio 2、在宿主机创建 /usr/local/data/miniodocker/config 和 /usr/local/data/miniodocker/data,执行docker命令 docker run -p 9000:9000 -p 9090:9090 --name minio -d --restartalways -e MINIO_ACCESS_KEYminio -e MINIO_SECRET_K…

miRMaker

Introduction 除了miRNA表达数据&#xff0c;各种miRNA相关的知识也强有力地支持了对miRNA功能相互作用的理解。 那些具有许多共同调控靶基因或疾病的miRNAs可能具有相似的功能 一些方法通过考虑实验验证的miRNA-靶标关系来评估miRNA相互作用&#xff0c;评估miRNA功能相互作…

KUKA机器人Loop循环的具体使用方法示例

KUKA机器人Loop循环的具体使用方法示例 如下图所示&#xff0c;新建一个示例程序&#xff0c; 如下图所示&#xff0c;添加一些动作指令&#xff0c; 如下图所示&#xff0c;如果想要机器人在第5行和第9行之间循环执行程序&#xff0c;则可以在第5行添加指令loop&#xff0…

Linux 特殊符号

目录 1. # 注释 2. &#xff1b;命令分隔符 3. .. 上级目录 4. . 当前目录 5. " " 换行&#xff0c;解析变量 6. 换行&#xff0c;不解析变量 7. \ 和 / 8. &#xff01;历史命令调用&#xff0c;取反 9. * 通配符 10. $ 调用变量 11. | 管道 12. || …

AWS-WAF-CDN基于速率rate的永久黑名单方案(基于lambda实现)

参考方案&#xff08;有坑&#xff09;&#xff0c; 所以产生了这篇博客&#xff1a; 点击跳转 1. 部署waf &#xff08;有则跳过&#xff09; 必须存在一个rate速率规则&#xff0c;后面的方案堆栈要用 新建rate速率规则 关联cdn资源 2.部署堆栈 (美国东部 (弗吉尼亚北部 …

安卓小练习-校园闲置交易APP(SQLite+SimpleCursorAdapter适配器)

环境&#xff1a; SDK&#xff1a;34 JDK&#xff1a;20.0.2 编写工具&#xff1a;Android Studio 2022.3.1 整体效果&#xff08;视频演示&#xff09;&#xff1a; 小练习-闲置社区APP演示视频-CSDN直播 部分效果截图&#xff1a; 整体工作流程&#xff1a; 1.用户登录&…