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

React整理总结(三)

1.props和state的更新

  • 父组件重新render时,所有的子组件也会调用render()函数。shouldComponentUpdate(nextProp, nextState)
shouldComponentUpdate(nextProps, nextState) {if (equal(nextProps, this.props) && equal(nextState, this.state)){return false} else {return true;}
}
  • PureComponent。只是对props和state进行了浅层比较
  • React.memo(),针对函数组件

2.ref获取原生DOM

  • 字符串 this.refs.domRef | <div ref="domRef" />
  • 创建ref this.titleRef = React.createRef() | <div ref={this.titleRef} />
  • 函数返回 <div ref={el => this.elRef = el} />
  • ref可以直接获取类组件实例,<MyComponent ref={this.comRef} />
  • ref获取函数式组件,需要使用forwardRef.
const MyComponent = React.forwardRef(function (props, ref){
return <div ref={ref} /> 
})

3.高阶组价

  • 高阶函数:接受函数作为参数或者返回值为函数
  • 高阶组件(HOC):接受组件作为参数,并且返回新组件
    增强props
    配合context使用,传递state
    登录鉴权
    生命周期劫持

4. Portals与Fragment

createPortal(content, target)将content内容挂载到target上

// html的body, 正常内容都是挂在root下
<div id="root"></div>
<div id="modal"></div>// Modal组件
import React, {PureComponent } from “react”;
import { createPortal } from 'react-dom';
export default class Modal extends PureComponent {constructor(props){super(props);}render(){return createPortal(this.props.children, document.querySelector("#modal"));	}
}
  • Fragment, 短语法<></>, 添加key时无法使用短语法

5. 严格模式StrictMode

  • 识别不安全的生命周期
  • 使用过时的ref APi
  • 检查意外的副作用,constructor会被调用两次,生产模式不会
  • 检查废弃的findDOMNode函数
  • 检查过时的context api

相关文章:

React整理总结(三)

1.props和state的更新 父组件重新render时&#xff0c;所有的子组件也会调用render()函数。shouldComponentUpdate&#xff08;nextProp&#xff0c; nextState&#xff09; shouldComponentUpdate(nextProps, nextState) {if (equal(nextProps, this.props) && equa…...

天气这么好,都外出了。顺便了解一下漏桶算法

看到标题&#xff0c;你想到了些什么呢&#xff1f; 又是一个阳光明媚的周末&#xff0c;大家都外出了&#xff0c;路上到处堵车&#xff0c;尤其是各桥梁、隧道入口处&#xff0c;很多车排队等着进入&#xff0c;而出口处就像一个漏桶一样&#xff0c;一辆车接着一辆车有序且…...

【FPGA】Verilog:实现 RS 触发器 | Flip-Flop | 使用 NOR 的 RS 触发器 | 使用 NAND 的 RS 触发器

目录 0x00 RS 触发器&#xff08;RS Flip-Flop&#xff09; 0x01 实现 RS 触发器 0x02 使用 NOR 的 RS 触发器 0x03 使用 NAND 的 RS 触发器 0x00 RS 触发器&#xff08;RS Flip-Flop&#xff09; 触发器&#xff08;Flip-Flop&#xff09;是一种带有时钟的二进制存储设备…...

【技术追踪】SAM(Segment Anything Model)代码解析与结构绘制之Mask Decoder

论文&#xff1a;Segment Anything   代码&#xff1a;https://github.com/facebookresearch/segment-anything 系列篇&#xff1a;   &#xff08;1&#xff09;【技术追踪】SAM&#xff08;Segment Anything Model&#xff09;代码解析与结构绘制之Image Encoder   &am…...

认识Tomcat

文章目录 什么是tomcat&#xff1f;tomcat的使用tomcat的下载tomcat的目录结构tomcat的启动在tomcat上部署页面通过浏览器访问部署的页面 学习servlet的原因 什么是tomcat&#xff1f; 盖棺定论&#xff1a;Tomcat是一个HTTP服务器。 我们接下来要长期学习的东西都是关于前后…...

c语言通信之串口通信

在C语言中&#xff0c;可以使用串口通信、网络通信等多种方式实现计算机之间的通信。其中&#xff0c;串口通信通常用于近距离、低速率的通信&#xff0c;而网络通信则适用于远距离、高速率的通信。 下面以串口通信为例&#xff0c;介绍在C语言中如何实现串口通信。 1.打开串…...

​软考-高级-系统架构设计师教程(清华第2版)【第16章 嵌入式系统架构设计理论与实践(P555~613)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第16章 嵌入式系统架构设计理论与实践&#xff08;P555~613&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图...

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷 2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷A模块基础设施设置/安全加固&#xff08;200分&#xff09;A-1&#xff1a;登录安全加固&#xff08;Windows, Linux&#xff09;A-2&#…...

【Python数据结构与算法】——(线性结构)精选好题分享,不挂科必看系列

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏:<<Python数据结构与算法专栏>>&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 时间复杂度大小比较 1.time complexity of algorithm A is O(n^3) while algorithm B is O(2^n). Which o…...

大数据-之LibrA数据库系统告警处理(ALM-12054 证书文件失效)

告警解释 系统在每天二十三点检查当前系统中的证书文件是否失效&#xff08;即当前集群中的证书文件是否过期&#xff0c;或者尚未生效&#xff09;。如果证书文件失效&#xff0c;产生该告警。 当重新导入一个正常证书&#xff0c;并且状态不为失效状态&#xff0c;该告警恢…...

Linux 之 journalctl 查看系统与 kernel 日志

目录 1. Linux 之 journalctl 查看系统与 kernel 日志 1. Linux 之 journalctl 查看系统与 kernel 日志 1 概述 日志管理工具 journalctl 是 centos7 上专有的日志管理工具, 该工具是从 message 这个文件里读取信息。Systemd 统一管理所有 Unit 的启动日志。带来的好处就是, …...

【PTA题目】7-3 冰雹猜想。 分数 10

7-3 冰雹猜想。 分数 10 全屏浏览题目 切换布局 作者 赵静静 单位 浙江工贸职业技术学院 冰雹猜想的内容是&#xff1a;任何一个大于1的整数n&#xff0c;按照n为偶数则除等2&#xff0c;n为奇数则乘3后再加1的规则不断变化&#xff0c;最终都可以变化为1。 例如&#xff…...

springBoot 配置druid多数据源 MySQL+SQLSERVER

1:pom 文件引入数据 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.0</version> </dependency>…...

二叉树的创建与遍历

目录 前言&#xff1a; 二叉树的概念与结构 二叉树的链式存储 二叉树的创建 二叉树的销毁 二叉树结点个数计算 二叉树叶子结点个数计算 二叉树第k层节点个数的计算 二叉树高度的计算 二叉树查找值为x的结点 二叉树的遍历 二叉树的前序遍历 二叉树的中序遍历 二叉树…...

Mysql相关操作命令合集

参考文档&#xff1a;2021-06-25MySQL8.0创建用户和权限控制 - 简书 mysql登陆命令&#xff1a; mysql -u用户名 -p密码; 若遇到复杂密码&#xff0c;包含特殊字符&#xff0c;则需要做转义&#xff08;以下密码为&#xff1a;rootry?elyl!&#xff09;&#xff1a; mysql…...

前端开发学习 (一) 搭建Vue基础环境

一、环境搭建 1、安装nodejs #下载地址 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi 2、配置环境变量 上面下载完安装包后自行安装&#xff0c;安装完成后安装下图操作添加环境变量 #查看版本 node --version v20.9.0# npm --version 10.1.03、配置npm加速源 np…...

二维码智慧门牌管理系统升级解决方案:查询功能大提升,让地址查找变得轻松便捷!

文章目录 前言一、支持地址名称、小区等信息进行模糊查询二、支持地图上绘制多边形、圆形、矩形进行范围查询三、高效的数据处理能力&#xff0c;保证查询速度四、灵活的应用场景&#xff0c;满足多种需求 前言 随着科技的快速发展和城市化的加速推进&#xff0c;传统的门牌管…...

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…...

C#入门(9):多态介绍与代码演示

多态性是面向对象编程的一个核心概念&#xff0c;它允许你使用一个父类引用来指向一个子类对象。这可以使程序具有可扩展性&#xff0c;并且可以用来实现一些高级编程技术&#xff0c;如接口、事件、抽象类等。 多态相关的概念 以下是一些在C#中使用多态性的关键概念&#xf…...

可拖动、可靠边的 popupWindow 实现

0 背景 开发要实现一个可以拖动的圆角小窗&#xff0c;要求松手时&#xff0c;哪边近些靠哪边。并且还规定了拖动范围。样式如下&#xff1a; 1 实现 首先把 PopupWindow 的布局文件 pop.xml 实现 <?xml version"1.0" encoding"utf-8"?> <R…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...