React基础巩固日志1

书写了一篇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.mzph.cn/news/231573.shtml

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

相关文章

不做数据采集,不碰行业应用,专注数字孪生PaaS平台,飞渡科技三轮融资成功秘诀

12月15日,飞渡科技在北京举行2023年度投资人媒体见面会,全面分享其产品技术理念与融资之路。北京大兴经开区党委书记、管委会主任常学智、大兴经开区副总经理梁萌、北京和聚百川投资管理有限公司(以下简称“和聚百川”)投资总监严…

【Qt之Quick模块】2.创建Qt Quick UI工程

前言 上个文档对Qucik模块进行了概述,及创建Quick应用程序流程。 这个文档是创建Quick UI工程。 Qt Quick UI原型 Qt Quick UI原型项目对于测试或原型化用户界面非常有用,或者只是为了进行QML编辑而设置一个单独的项目。但是不能用它们进行应用程序开…

Axure情形动作篇(ERP登录效验)

目录 一、ERP系统用户登录效验 1.1 完成步骤 1.2 最终效果 二、省市区联动 三、ERP菜单栏页面跳转 四、下拉加载效果实现 4.1 加载动画实现步骤 4.2 下划界面加载实现 4.3 最终效果 一、ERP系统用户登录效验 1.1 完成步骤 首先搭建ERP系统的登录界面(输入…

【Spring】12 EmbeddedValueResolverAware 接口

文章目录 1. 简介2. 作用3. 使用3.1 创建并实现接口3.2 配置 Bean3.3 创建启动类3.4 启动 4. 应用场景总结 Spring 框架提供了许多回调接口,以便开发者在 Bean 的生命周期中执行一些特定操作。其中之一是 EmbeddedValueResolverAware 接口,本文将深入探…

Android Studio(3.6.2版本)安装 java2smali 插件,java2smali 插件的使用方法简述

一、Android Studio(3.6.2版本)安装 java2smali 插件 1、左上角File—>Setting,如下图 2、Setting界面中:点击Plugins—>选择右侧上方Marketplace—>搜索栏输入java2smali,如下图 3、点击Install按钮—>点…

【每日一题】—— C. Largest Subsequence(Codeforces Round 915 (Div. 2))(规律、字符串处理)

🌏博客主页:PH_modest的博客主页 🚩当前专栏:每日一题 💌其他专栏: 🔴 每日反刍 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓称…

python图像二值化处理

目录 1、双峰法 2、P参数法 3、迭代法 4、OTSU法 图像的二值化处理是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的只有黑和白的视觉效果。二值化是图像分割的一种最简单的方法,可以把灰度图像转换成二值图像。具体实现是将大…

C# WPF上位机开发(ExtendedWPFToolkit扩展包使用)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 虽然个人认为当前的c# wpf内容已经足够多,但是肯定还是有很多个性化的需求没有满足。比如说不够好看,比如说动画效果不好&a…

解决ZooKeeper中/rmstore无法删除问题

无法删除znode /rmstore的原因在于yarn在注册时候候自己添加上ACL,导致无法直接删除。解决办法:重新设置ACL。 首先,查看ACL:getAcl /rmstore/ZKRMStateRoot 之后,重新设置ACL:setAcl /rmstore/ZKRMState…

SQL进阶理论篇(十二):InnoDB中的MVCC是如何实现的?

文章目录 简介事务版本号行记录的隐藏列Undo LogRead View的工作流程总结参考文献 简介 在不同的DBMS里,MVCC的实现机制是不同的。本节我们会以InnoDB举例,讲解InnoDB里MVCC的实现机制。 我们需要掌握这么几个概念: 事务版本号行记录的隐藏…

任务十六:主备备份型防火墙双机热备

目录 目的 器材 拓扑 步骤 一、基本配置 配置各路由器接口的IP地址【省略】 1、配置BGP协议实现Internet路由器之间互联 2、防火墙FW1和FW2接口IP配置与区域划分 3、配置区域间转发策略 4、配置NAPT和默认路由 5、配置VRRP组,并加入Active/standby VGMP管…

Windows下配置最新ChromeDriver

1、问题 在使用代码调用谷歌浏览器时会出错: from selenium import webdriver driver webdriver.Chrome() SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 114 Current browser versi…

KSP音频抓包

1. 按照网上其他教程&#xff0c;安装KSP抓音频 Biu~笔记&#xff1a;高通蓝牙ADK&#xff08;38&#xff09;-- KSP in MDE - 大大通(简体站) Biu~笔记&#xff1a;高通蓝牙ADK&#xff08;22&#xff09;--DSP音频链路监听 - 大大通(简体站) <<Biu~笔记&#xff1a;高…

AX7A200教程(9): ov5640摄像头输出显示720p视频

一&#xff0c;功能框图 ov5640摄像头视频通过ddr3缓存后&#xff0c;最后使用hdmi接口进行输出显示 二&#xff0c;摄像头硬件说明 2.1&#xff0c;像头硬件管脚 如下图所示&#xff0c;一共18个管脚 2.2&#xff0c;摄像头电源初始化时序 因这个ov5640摄像头是买的老摄像…

JDK bug:ciObjectFactory::create_new_metadata

文章目录 1、问题2.详细日志3.JDK&#xff1a;bug最终bug链接&#xff1a; 京东遇到过类似bug各位大佬如果有更详细的解答可以留言。 1、问题 Problematic frame: V [libjvm.so0x438067] ciObjectFactory::create_new_metadata(Metadata*)0x327 关键字还是ciObjectFactory::cr…

关键字、标识符、变量、基本数据类型

一、关键字&#xff08;Keyword&#xff09; 定义&#xff1a;被Java语言赋予了特殊含义&#xff0c;用做专门用途的字符串&#xff08;或单词&#xff09; 特点&#xff1a;全部关键字都是小写字母 Java关键字查询关键地址&#xff1a; http:// https://docs.oracle.com/j…

电影小镇智慧旅游项目技术方案:PPT全文111页,附下载

关键词&#xff1a;智慧旅游项目平台&#xff0c;智慧文旅建设&#xff0c;智慧城市建设&#xff0c;智慧文旅解决方案&#xff0c;智慧旅游技术应用&#xff0c;智慧旅游典型方案&#xff0c;智慧旅游景区方案&#xff0c;智慧旅游发展规划 一、智慧旅游的起源 智慧地球是IB…

机器学习:增强式学习Reinforcement learning

收集有标签数据比较困难的时候同时也不知道什么答案是比较好的时候可以考虑使用强化学习通过互动&#xff0c;机器可以自己知道什么结果是好的&#xff0c;什么结果是坏的 Outline 什么是RL Action就是一个functionEnvironment就是告诉这个Action是好的还是坏的 例子 Space i…

算法专题二:滑动窗口

算法专题二&#xff1a;滑动窗口 一.长度最小的子数组&#xff1a;1.思路一&#xff1a;暴力解法2.思路二&#xff1a;滑动窗口双指针3.GIF题目解析&#xff1a;思路一&#xff1a;思路二&#xff1a; 二.无重复字符的最长子串&#xff1a;1.思路一&#xff1a;滑动窗口2.GIF题…

Android-----AndroidManifests.xml 之meta-data

一、概念 meta-data&#xff1a;元数据、文件元数据。主要用来定义一些组件相关的配置值。 metadata是一组供父组件使用的名值对&#xff08;name-value pair&#xff09;&#xff0c;一个组件元素可以包含任意数量的meta-data子元素。这些子元素的值存放在一个 Bundle 对象中…