react学习随笔

news2025/7/11 15:22:49

创建react脚手架项目

方法一:在安装好nodejs的情况下
npm install -g create-react-app 全局安装react脚手架
create-react-app 项目名 创建一个新的react项目
方法二:直接安装
npx create-react-app 项目名
npx create-react-app 项目名 --template typescript

注意:创建好的项目配置文件webpack相关是隐藏的,需要运行npm run eject解包展示出来。但是是不可逆的,所以可以换以下方式!

# 解包前必须做git提交,到commit就行了,否则无法解包(这是为了方便随时做版本回滚)
$ git add .
$ git commit -m '解包前'
$ npm run eject

# 会发现多了个config配置文件夹。
# 项目默认配置了sass ,但是想要使用less需要找到sassModuleRegex重新配置一下
{
	test: /\.less$/,
	use: getStyleLoaders(
		{
			//暂不配置
		},
		'less-loader'
	),
},

hooks(函数式组件才用)

useState 便于修改变量
useEffect 模拟三个生命周期:
	mounted(componentDidMount)
	updated(componentDidUpate)
	beforeDestory(componentWillUnmount)
useRef 用于获取节点
createContext 方便多级组件传参

生命周期

旧版生命周期(react17之前)
初始阶段    设置 props and state(static设置属性和constructor设置状态)
挂载阶段    componentWillMount render componentDidMount
修改阶段    修改 props and states ==> props: componentsWillReceiveProps -- shouldComponentUpdate -- componentWillUpdate -- render -- componentDidUpate
                                     states: shouldComponentUpdate -- componentWillUpdate -- render -- componentDidUpate
销毁阶段    componentWillUnmount
新版生命周期(react17及之后) --will的的都没有了
创建阶段
修改阶段
销毁阶段

dom diff算法

没有索引key:一一对比。老的节点与新的节点比。依次对比。

有索引key优化 :先比较索引key,再比较元素类型(元素类型相同的都可以复用),再比较函数内容,再比较下标,新下标<=老下标则不需要更新。新下标>老下标则需要移动和更新。其他索引key不同的,直接进行新增和删除。例子如下:

class AAA extends React.Component {
  constructor(props) {
    super(props) //相当于this.props=props重写父类构造函数
    this.state ={visible:true}; //设置默认状态
  }
  handleClick=()=>{
    this.setState({visible:!this.state.visible})
  }
  render() {
    //4的时候没有子组件,componentWillUnmount卸载子组件
    return ( 
     <div>
       <button onClick={this.handleClick}>改变</button>
       {
         this.state.visible?
       <ul>
           <li key="A">A</li>
           <li key="B">B</li>
           <li key="C">C</li>
           <li key="D">D</li>
           <li key="E">E</li>
           <li key="F">F</li>
       </ul>: <ul>
           <li key="A">A</li>
           <li key="C">C</li>
           <li key="E">E</li>
           <li key="B">B</li>
           <li key="G">G</li>
       </ul>
      }
     </div>
    )
  }
}

观察控制台元素发现,点击按钮,元素改变。有些元素不重新渲染有些元素重新渲染

原理:先比较key是否相同,相同比较type元素类型。再比较内容,内容相同,比较下标(0到n)。如果新下标<=老下标,那么是绿色的,不用更新。如果新下标>老下标,那么是黄色的,需要移动和更新。如果新的没有此元素或者老的多余了,进行新增和删除
在这里插入图片描述

context上下文

小项目可以用context,大项目还是用redux

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

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

相关文章

org.activiti.engine

org.activiti.engine目录概述需求&#xff1a;设计思路实现思路分析1.TaskService2.RuntimeService3.ProcessEngines4.ProcessEngineLifecycleListener5.ProcessEngines参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,…

详解Unity中的新版Nav Mesh|导航寻路系统 (三)

前言 通过前面两篇的介绍与讲解我们已经对新版NavMesh有了一个基础的了解和使用&#xff0c;本篇我们继续讲解剩余的两个组件NavMeshModifier、NavMeshModifierVolume&#xff0c;这两个组件是主要是用于影响导航网格的生成的。所以内容不是很主要&#xff0c;但也非常重要。 …

LQ0209 颠倒的价牌【枚举+进制】

题目来源&#xff1a;蓝桥杯2013初赛 C A组D题 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小李的店里专卖其它店中下架的样品电视机&#xff0c;可称为&#xff1a;样品电视专卖店。 其标价都是 4 位数字&am…

Pulsar bundle数目的选择

看到今年Pulsar 峰会上挺多人分享负载均衡的内容&#xff0c;这里也整理分享一下相关的内容。 实践中&#xff0c;我们都会 关闭 auto bundle split&#xff0c;保证系统稳定 Pulsar bundle split 是一个比较耗费资源的操作&#xff0c;会造成连接到这个 bundle 上的所有 pr…

SAP 物料分类账配置详解Part 1( 基于SAP S/4HANA1909 版本)

本文将详细介绍&#xff1a;SAP 物料分类账配置要点 &#xff0c;本系统使用的版本是&#xff1a; SAP S/4HANA1909 版本目录 1 物料分类账的后台配置 1.1 激活物料分类帐的评估区域 1.2 分配货币类型并定义物料分类帐类型 1.3 分配物料分类帐类型给评估范围 1.5 定义…

m基于MATLAB的通信系统仿真,包括信号源,载波信号,放大器,带宽滤波器,接收端包括放大器,带宽滤波器,载波解调,低通滤波器等

目录 1.算法概述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法概述 Interference : 200KHz Signal source: 需要在给出的一个excel 文档里调用&#xff0c;我对应的信号是第二竖栏&#xff0c;就是从B1到B60 里面所有的filter(滤波器)都是自己来选值&am…

驱动 私有数据传参点灯

1.在串口工具进行输入&#xff1a; echo 1 > /dev/myled0 ---->led1灯点亮 echo 0 > /dev/myled0 ---->led1灯熄灭 echo 1 > /dev/myled1 ---->led1灯点亮 echo 0 > /dev/myled1 ---->led1灯熄灭 echo 1 > /dev/myled2 ----…

243 h160 相交链表

题解 本题关键: acbbca // 243 h160 相交链表public ListNode getIntersectionNode(ListNode headA, ListNode headB) {ListNode pointAheadA,pointBheadB;int rount2;while (rount>0){if (pointApointB){return pointA;}pointApointA.next;pointBpointB.next;if (pointAnul…

【树莓派不吃灰】命令篇⑥ 了解树莓派Boot分区,学习Linux启动流程

目录1. Linux启动过程1.1 内核引导1.2 运行init初始化进程 —— 初始化系统环境1.3 运行级别 —— runlevel1.4 系统初始化 —— 加载开机启动程序1.5 用户登录1.5.1 方式1&#xff1a;命令行登录1.5.2 方式2&#xff1a;ssh登录&#xff08;常用&#xff09;1.5.3 方式3&#…

[附源码]计算机毕业设计JAVA恒星学院网络计费系统

[附源码]计算机毕业设计JAVA恒星学院网络计费系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM my…

Lingo软硬件划分 实例

文章目录一、SM2 加密算法软硬件划分1.1 实验目标1.2 实验过程&#xff08;1&#xff09; 综合考虑使得系统整体性能最&#xff08;2&#xff09;只考虑硬面积&#xff0c;即系统硬件面积最小&#xff08;3&#xff09;只考虑功耗&#xff0c;即系统功耗最小&#xff08;4&…

SpringBoot实用开发篇复习4(实用开发篇完)

在上面一节&#xff0c;我们学习了SpringBoot整合第三方技术&#xff0c;这次我们主要学习监控技术&#xff0c;主要包含四个部分&#xff0c;分别为监控的意义&#xff0c;可视化监控平台&#xff0c;监控的原理&#xff0c;自定义监控指标等&#xff0c;下面一起来学习吧。 …

nodejs+vue+elementui前台美食网上订餐点菜系统 vscode项目

前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE 系统分为不同的层次&#xff1a;视图层&#xff08;vue页面&#xff09;&#xff0c;表现层&#xff08;控制器类&#xff09;&#xff0c;业务层&#xff08;接口类&#xff09;和持久层…

SSM框架+LayUi+Mysql实现的物流配送管理系统(功能包含分角色,登录/注册、车辆管理/路线管理/运单管理/调度安排/信息管理等)

博客目录SSM框架LayUiMysql实现的物流配送管理系统实现功能截图系统功能使用技术代码完整源码SSM框架LayUiMysql实现的物流配送管理系统 本系统为了解决物流平台的配送难题&#xff0c;将司机/物流配送的整体流程话&#xff0c;便于物流公司的统一管理&#xff0c;提高了物流日…

JUC学习笔记——共享模型之内存

在本系列内容中我们会对JUC做一个系统的学习&#xff0c;本片将会介绍JUC的内存部分 我们会分为以下几部分进行介绍&#xff1a; Java内存模型可见性模式之两阶段终止模式之Balking原理之指令级并行有序性volatile原理 Java内存模型 我们首先来介绍一下Java内存模型&#xf…

博途1200PLC编码器速度信号采集和滤波处理

速度估算有M法和T法测速2种常用方法,工业控制PLC上基本采用M法测速,M法测速的详细原理,这里不再赘述。感兴趣的可以参看下面的文章链接: PLC通过编码器反馈值计算速度的推荐做法(算法解析+ST代码)_RXXW_Dor的博客-CSDN博客PLC如何测量采集编码器的位置数据,不清楚的可以…

spring框架源码十七、Bean对象创建子流程

Bean对象创建子流程Bean对象创建子流程new ClassPathXmlApplicationContextClassPathXmlApplicationContext#ClassPathXmlApplicationContext(java.lang.String)ClassPathXmlApplicationContext#ClassPathXmlApplicationContext(java.lang.String[], boolean, org.springframew…

冒泡事件在Vue中的应用

什么是事件冒泡&#xff1f; 一想到“冒泡”这两个词会想到什么&#xff1f;想必然&#xff0c;那就是气泡自下而上的从水底往上生的场景&#xff0c;但是我们也知道&#xff0c;水在往上升的过程中&#xff0c;也会经历不同的高度。由此场景&#xff0c;那么想必然&#xff0c…

JavaEE 进阶:Spring 核⼼与设计思想

文章目录一、Spring 是什么1、什么是容器2、什么是 IoC① 传统程序开发Ⅰ 轮胎尺寸固定a. 代码b. 缺陷Ⅱ 轮胎尺寸改变a. 代码b. 缺陷② 控制反转式程序开发Ⅰ 控制反转Ⅱ 需求增加Ⅲ 优点③ 对⽐总结规律3、理解 Spring IoC4、DI 概念说明一、Spring 是什么 Spring是当前Java…

Windows安装nginx

Windows安装nginx1.下载Nginx2.Nginx的使用2.1 修改nginx.conf2.2 启动nginx3.可能出现的问题观前提示&#xff1a; 本文所使用的系统Windows10。 1.下载Nginx Nginx官网&#xff0c;点击download下载 根据需求下载自己所需版本&#xff0c;这里我下载的是稳定版本 2.Nginx的…