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

react18中的函数组件底层渲染原理分析

react 中的函数组件底层渲染原理

  • react组件没有局部与全局之分,它是一个整体。这点跟vue的组件化是不同的。
  • 要实现 react 中的全局组件,可以将组件挂在react上,这样只要引入了react,就可以直接使用该组件。
    在这里插入图片描述

函数式组件的创建

  • 创建一个函数,函数中返回一个jsx或者jsx元素,virtualdom
  • 基于 es6 的模块导入导出方式,将函数作为模块的导出.可以忽略后缀名。
<Component />
<Component>...</Component>
  • 命名:首字母大写,大驼峰命名。小写字母开头,编译器会认为这是一个标签,编译器也会报错。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

关于 props 属性的细节知识

  • 函数组件不能使用this关键字。
  • 函数组件不能使用生命周期钩子。
  • 子组件的props属性,不能直接修改。
  • 获取子组件的props属性,需要使用props.xxx

对象的冻结密封不可扩展

  • 被冻结的对象,不能添加、删除或修改其属性。也不能劫持对象。Object.defineProperty方法不能修改这些属性。Object.isFrozen方法用来检测对象是否被冻结。
  • 被密封的对象的属性,可以修改值,但是不能添加、删除。但不能劫持对象。Object.isSealed方法用来检测对象是否被密封。
  • 不可扩展的对象,除了不能新增成员,其他操作都正常。Object.isExtensible方法用来检测对象是否可以扩展。

总结: 被冻结的对象,既是不可扩展的,也是密封的。被密封的,也是不可扩展的。

所以,我们在组件内部修改props属性时,需要先拷贝一份,然后才能修改。否则会报错。

组件的默认值

  • 函数组件.defaultProps属性,可以设置组件的默认值。
function Jsx({ name }) {return (<div>Jsx<hr /><p>{name}</p></div>);
}Jsx.defaultProps = { name: "zs22222222" };
export default Jsx;

在这里插入图片描述

函数的类型校验

  • 函数组件.propTypes属性,可以设置组件的默认值。 需要我们安装prop-types库。
    Component组件一样,需要使用import导入。
import PropTypes from "prop-types";
Child.defaultProps = { name: "zs22222222", age: 18 };
Child.propTypes = {name: PropTypes.string,age: PropTypes.oneOfType([PropTypes.number.isRequired,PropTypes.string,PropTypes.bool,]),
};

函数组件中的插槽处理

  • 插槽的作用,就是将父组件中的内容,原封不动的传递给子组件。想办法让组件更加灵活,具有更强的复用性

    • 数据值用属性

    • html 片段用插槽
      在这里插入图片描述
      在这里插入图片描述

    • children 属性,传递子组件的jsx元素,是数组的情况下,要使用下面的方式来接收,也可以使用React.Children里面的方法来进行处理
      在这里插入图片描述
      在这里插入图片描述

    • 插槽内容可以根据不同的需求,放到不同的位置。
      在这里插入图片描述

静态组件和动态组件

function Vote() {function handleSubmit() {}function handleCancel() {}return (<div className="vote-box"><div className="header"><h2 className="title">标题</h2><span>15</span></div><div className="main"><p>支持人数: 10</p><p>反对人数: 5</p></div><div className="footer"><button onClick={handleSubmit} className="btn btn-primary">支持</button><button onClick={handleCancel} className="btn btn-danger">反对</button></div></div>);
}
export default Vote;
  • 第一次渲染组件,执行函数,产生一个私有的上下文,把解析出来的 props 包括 children 属性,保存到上下文,并冻结了props属性,不可修改。返回一个jsx元素的vdom。渲染jsx元素,生成virtualdom

  • 当我们点击按钮,再次渲染组件时
    修改上下文中的变量,私有作用于发生了变化,但是视图不会更新。所以称为静态组件。
    除非在父组件中,修改了子组件的props属性,才会重新渲染。

  • 动态组件:实际项目中,我们会遇到在第一次渲染组件完成后,需要基于组件内部的状态变化,让组件可以更新,以呈现出不同的页面效果。 ====> 动态组件(class 组件,hooks 组件)

  • 2、 初始化状态
    状态:后期修改状态,可以触发视图的更新
    需要手动初始化,如果我们没有去做相关的处理,则默认会往实例上挂载一个state,初始值是null =>this,state=null
    手动处理:

state = {xxx:xxx
}

修改状态,控制视图更新this.state.xxx=xxx :这种操作仅仅是修改了状态值,但是无法让视图更新想让视图更新,我们需要基于React.Component.prototype提供的方法操作:「推荐」

  • 1 this.setstate(partialstate)既可以修改状态,也可以让视图更新
  • partialstate:部分状态
 this.setstate({xxx:xxx
})
  • 2 this.forceUpdate()强制更新

在这里插入图片描述
在这里插入图片描述
forceUpdate在类组件中生效的使用方法,当你必须使用这个api页面才更新的时候,说明你的业务代码中就已经出现了问题了。如果我们是基于 this.forceUpdate()强制更新视图,会跳过 shouldcomponentUpdate 周期函数的校验,直接从willUpdate开始进行更新,这时视图就一定会更新。

import { Component } from "react";
class Vote extends Component {state = {oppPerson: 0,aggPerson: 0,};handleSubmit() {}handleCancel = () => {this.state.oppPerson++;   //这种使用是不对的,this.forceUpdate();};render() {const { oppPerson, aggPerson } = this.state;return (<div className="vote-box"><div className="header"><h2 className="title">标题</h2><span>15</span></div><div className="main"><p>支持人数: {aggPerson}</p><p>反对人数: {oppPerson}</p></div><div className="footer"><button onClick={this.handleSubmit} className="btn btn-primary">支持</button><button onClick={this.handleCancel} className="btn btn-danger">反对</button></div></div>);}
}
export default Vote;

请添加图片描述

父子组件的更新顺序

  • vue中
    在这里插入图片描述
  • react中
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

相关文章:

react18中的函数组件底层渲染原理分析

react 中的函数组件底层渲染原理 react组件没有局部与全局之分&#xff0c;它是一个整体。这点跟vue的组件化是不同的。要实现 react 中的全局组件&#xff0c;可以将组件挂在react上&#xff0c;这样只要引入了react&#xff0c;就可以直接使用该组件。 函数式组件的创建 …...

提升产品竞争力之--IPD产品成本篇

在汉捷的咨询过程中&#xff0c;很多企业老总交流时都会提起这个抱怨&#xff1a;“现在产品竞争太激烈了&#xff0c;客户买产品首先看价格&#xff0c;你价格高一点就买别家的啦……” 汉捷咨询在前文谈到“通过定义产品包需求&#xff0c;来提升产品竞争力。差异化开发&…...

如何在Debian操作系统上安装Docker

本章教程&#xff0c;主要介绍如何在Debian 11 系统上安装Docker。主要使用一键安装Docker脚本和一键卸载脚本来完成。 一、安装Docker #!/bin/bashRED\033[0;31m GREEN\033[0;32m YELLOW\033[0;33m BLUE\033[0;34m NC\033[0mCURRENT_DIR$(cd "$(dirname "$0")…...

ArrayList和Array、LinkedList、Vector 间的区别

一、ArrayList 和 Array 的区别 ArrayList 内部基于动态数组实现&#xff0c;比 Array&#xff08;静态数组&#xff09; 使用起来更加灵活&#xff1a; ArrayList 会根据实际存储的元素动态地扩容或缩容&#xff0c;而 Array 被创建之后就不能改变它的长度了。ArrayList 允许…...

Linux开发环境配置(下)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…...

系统开发常用命令合集

本文还会持续更新&#xff0c;大家可以点赞收藏~ ifconfig ifconfigwlan0表示无线网络接口 eth0表示以太网接口&#xff08;有线&#xff09; HWaddr是接口的物理地址&#xff08;MAC地址&#xff09; inet addr是接口的IPv4地址 Bcast是广播地址&#xff0c;Mask是子网掩码 …...

Termius工具在MAC的使用出现的问题:

Termius工具在MAC的使用出现的问题&#xff1a; 在使用SFTP时&#xff0c;出现不了本地的文件的位置 解决方案&#xff1a; 在Apple store下载的使用不了LOCAL SFTP&#xff0c; 需要在网页上进行下载才可以&#xff1a; 官网下载地址&#xff1a;https://termius.com/down…...

浅析Android中View的绘制流程

前言 在《浅析Android中View的测量布局流程》中分析了VSYNC信号到达App进程之后开启的View布局过程&#xff0c;经过对整个View树进行遍历进行测量和布局&#xff0c;最终确定View的大小以及在屏幕中所处的位置。但是如果用户想在屏幕上看到View的内容还需要经过绘制来生成图形…...

pikachu靶场- 文件上传unsafe upfileupload

pikachu靶场- unsafe upfileupload 概述client checkMIME typegetimagesize() 概述 不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见&#xff0c;比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后&#xff0c;后台会对上传的文件进行判断…...

java中this的内存原理是?

在Java中&#xff0c;this关键字是一个特殊的引用&#xff0c;指向当前对象的实例。它在以下几个方面发挥重要作用&#xff1a; 指向当前对象&#xff1a;this可以用来访问当前对象的属性和方法&#xff0c;尤其在参数命名与实例变量重名时&#xff0c;用于区分。 构造函数&a…...

Matlab 车牌识别技术

1.1设计内容及要求&#xff1a; 课题研究的主要内容是对数码相机拍摄的车牌&#xff0c;进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发&#xff0c;涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…...

CUDA-求最大值最小值atomicMaxatomicMin

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 实现原理 atomicMax和 atomicMin是 CUDA 中的原子操作&#xff0c;用于在并行计算中安全地更新共享变量的最大值和最小值。它们确…...

新的Midjourney就是一个增强版的Photoshop,你现在可以轻松的用它换衣服、换发型了

好久没有聊 Midjourney 了&#xff0c;昨晚他们发布了一项引人注目的新功能&#xff1a;AI 图像编辑&#xff0c;一个基于网页的加强版的 Photoshop 呼之欲出&#xff0c;让我大为震撼&#xff0c;也让用户们赞叹不已。 基于现有图像进行参考&#xff0c;进而生成新的图片&…...

Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

一.源码安装 linux安装软件采用源码安装灵活自由&#xff0c;适用于不同的平台&#xff0c;维护也十分方便。 &#xff08;一&#xff09;源码安装流程  源码的安装一般由3个步骤组成&#xff1a; 1.配置&#xff08;configure&#xff09; Configure是一个可执行脚本…...

基于Spring Boot的洪涝灾害应急信息管理系统设计与实现

摘要 近年来&#xff0c;全球气候变化加剧&#xff0c;洪涝灾害频发&#xff0c;给各国的经济发展和人民生活带来了巨大的威胁。为了提高洪涝灾害的应急响应能力&#xff0c;开发高效的应急信息管理系统变得至关重要。本文基于Spring Boot框架&#xff0c;设计并实现了一个洪涝…...

912.排序数组(桶排序)

目录 题目解法 题目 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题&#xff0c;时间复杂度为 O(nlog(n))&#xff0c;并且空间复杂度尽可能小。 解法 class Solution { public:vector<int> sortArray(vect…...

IPC 进程间通信 消息队列

操作系统内核中采用一个链式队列管理消息,每个节点就对应一个消息&#xff1a; 操作系统规定了单个消息的数据长度不能超过8k(8192个字节)&#xff0c;一个消息队列的表长(节点数)最多不超过256个 利用消息队列进行通信的特点&#xff1a; 1. 全双工&#xff1a;任何参与通信的…...

opencv 图像翻转- python 实现

在做图像数据增强时会经常用到图像翻转操作 flip。 具体代码实现如下&#xff1a; #-*-coding:utf-8-*- # date:2021-03 # Author: DataBall - XIAN # Function: 图像翻转import cv2 # 导入OpenCV库path test.jpgimg cv2.imread(path)# 读取图片 cv2.namedWindow(image,1) …...

使用DolphinScheduler接口实现批量导入工作流并上线

使用DS接口实现批量导入工作量并上线脚本 前面实现了批量生成DS的任务&#xff0c;当导入时发现只能逐个导入&#xff0c;因此通过接口实现会更方便。 DS接口文档 DS是有接口文档的地址是 http://IP:12345/dolphinscheduler/swagger-ui/index.html?languagezh_CN&lang…...

pycharm导出环境安装包列表

pycharm导出环境安装包列表 一、导出安装包列表二、安装requirements.txt三、列表显示已安装的包四、显示特定包的信息 一、导出安装包列表 pip freeze > requirements.txt二、安装requirements.txt pip install -r requirements.txt三、列表显示已安装的包 pip list四、…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...