React面试总结

React中JSX转换为真实Dom的过程

可以从几个大体过程来看

  1. jsx语法解析
    jsx语法解析成js代表的对象,即把jsx语法转换为基于js的React.createElement(args1,args2,args3),args1,args2,args3分别是标签类型、属性和标签内容,主要利用的是babel等库
  2. 虚拟dom构建
    react基于js的对象构建虚拟dom。虚拟dom是个树形结构,用于描述页面的结构和属性
  3. 虚拟dom的diff
    react会对比vdom更新操作前后的虚拟dom,找出两者差异
  4. 真实dom的操作
    对比出虚拟dom的差异后,将dom更新在真实dom上生效

React生命周期

  • 挂载
    组件初始化

    • constructor 初始化state和props
    • static getDrivedStateFromProps
    • render 创建虚拟dom
    • didmount 第一次渲染后
  • 更新
    state和props发生变化时更新组件

    • static getDrivedStateFromProps
    • shouldComponentUpdate 返回bool值,返回为true才会继续后面的生命周期
    • render
    • didupdate
  • 卸载
    组件卸载时

  • willUnmount

  • static getDrivedStateFromProps

  • render

React setState

setState是个异步方法,会把每次的state放在事件队列中,批量执行,核心是利用了Object.assign(oldState,newState)

fiber

产生由来

react18前,dom更新是通过深度遍历比较vdom的,这个过程是不可打断的(因为只记录的子节点,没有兄弟节点),当dom树深度较深时,就会导致栈深度较深,会占用主线程的渲染资源,所以出现了fiber。fiber其实就是进阶版虚拟dom,是一个含有多个dom属性的js对象,本质是一个含有三个指针的链表结构,分别指向父亲节点、兄弟节点和子节点,这个结构保证了fiber的遍历比较可以被中断(因为不需要重新去遍历dom树节点)

初始化

更新

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

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

相关文章

leetcode 316.去除重复字母

思路:贪心单调栈。 这道题和前几天做的那道“删除k位数字”那道题很像。 这里由于是按照字典序进行输出的,而且删除的地方我们也不知道,是随机的,这个时候其实就应该想到用单调栈进行解答,其实这样才能进行很好的存储…

COPY requires at least two arguments, docker COPY 报错

COPY requires at least two arguments # 使用 Node.js 12.16.0FROM node:12.16.0WORKDIR /appCOPY ..原因:Dockerfile文件COPY后的两个. 要加空格 本内容来源于小豆包,想要更多内容请跳转小豆包 》

【Frida】【Android】01_手把手教你环境搭建

▒ 目录 ▒ 🛫 导读开发环境 1️⃣ 环境搭建安装Android模拟器安装Frida CLI安装Frida Server端口重定向:adb forward 2️⃣ 运行测试spwan模式attach模式直接加载脚本 📖 参考资料 🛫 导读 开发环境 版本号描述文章日期2024-03…

C++按位运算

6.3 按位运算 6.3.1 位运算概述 符号描述运算规则实例&与两个位都为1时,结果才为1。0001&00011,0001&00000,0000&00000000|或两个位都为0时,结果才为0。0001^异或两个位相同为0,相异为1。0001∧00010000,0001∧00001,0000∧…

matlab空间曲线图形

说明:问题来自CSDN-问答板块,题主提问。 需求:如何用子图命令画出平面y2z,z2y与球面x^2y^2z^25相交的空间曲线图形。需要完整代码和结果的图片。 一、先看效果图 二、代码 % 创建figure figure% 创建二维网格,用于定…

element ui实践bug

文章目录 el-table的默认全部展开属性default-expand-all el-table的默认全部展开属性default-expand-all 该属性只有table 初始化时才会生效,后续动态更改无效。 如果想要动态修改default-expand-all 属性,则需要控制table 的重新渲染,可以…

day01_mysql数据类型和运算符_课后练习 - 参考答案

文章目录 day01_mysql_课后练习第1题第2题第3题第4题第5题 day01_mysql_课后练习 第1题 案例: 1、创建数据库day01_test01_library 2、创建表格books 字段名字段说明数据类型允许为空唯一b_id书编号int(11)否是b_name书名varchar(50)否否…

性能调优专题并发编程专题(持续更新)

一、性能调优专题 MySQL相关 一、深入理解MySQL索引底层数据结构与算法 索引概念:索引是帮助MySQL高效获取数据的排好序的数据结构 索引数据结构: 1、二叉树 缺点:当索引字段有序的时候,不会自动平衡二叉树,数据…

JavaScript单元测试jasmine学习(一)

介绍: jasmine是用于测试JavaScript的一种测试框架,BDD(Behavior Driven Development)行为驱动开发。不依赖于任何其他JavaScript框架,也不需要DOM 准备工作: 1. 首先添加jasmine到自己的项目中 npm install --save-dev jasmine 2. 在项目…

【热门话题】ECMAScript vs JavaScript:理解两者间的联系与区别

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 ECMAScript vs JavaScript:理解两者间的联系与区别1. ECMAScript&am…

小目标检测常见解决策略总结

1. 引言 尽管目标检测算法取得了长足的发展,例如 Faster RCNN、YOLO、SSD、RetinaNet、EfficientDet 等。通常,这些模型是在 COCO数据集上训练的。它是一个包含各种对象类别和标注的大规模数据集,因此在训练对象检测器方面很受欢迎。然而&am…

基础语法——字符串

字符串数组的常用操作 需引用头文件#include<cstring> #include<iostream> #include<cstring>using namespace std;int main(){char str[100];char a[10],b[10];strlen(str); //求字符串的长度&#xff0c;不包括\0 ,O(n)strcmp(a,b); //按字典序比较a,b的…

应急响应实战笔记04Windows实战篇(1)

第1篇&#xff1a;FTP暴力破解 0x00 前言 ​ FTP是一个文件传输协议&#xff0c;用户通过FTP可从客户机程序向远程主机上传或下载文件&#xff0c;常用于网站代码维护、日常源码备份等。如果攻击者通过FTP匿名访问或者弱口令获取FTP权限&#xff0c;可直接上传webshell&#…

RuoYi-Vue-Plus(基础知识点jackson、mybatisplus、redis)

一、JacksonConfig 全局序列化反序列化配置 1.1yml中配置 #时区 spring.jackson.time-zoneGMT8 #日期格式 spring.jackson.date-formatyyyy-MM-dd HH:mm:ss #默认转json的属性&#xff0c;这里设置为非空才转json spring.jackson.default-property-inclusionnon_null #设置属性…

直接插入排序(六大排序)

本期讲解排序与六大排序中的希尔排序 —————————————————————— 1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性…

Android 锁屏界面启动流程

本文基于Android 7.1 在开机过程中&#xff0c;Systemserver 会启动 WindowManagerService,并调用其systemReady 方法。进而调用PhoneWindowManager的systemReady方法 Overridepublic void systemReady() {mKeyguardDelegate new KeyguardServiceDelegate(mContext,this::onK…

win10开启了hyper-v,docker 启动还是报错 docker desktop windows hypervisor is not present

问题 在安装了docker windows版本后启动 docker报错docker desktop windows hypervisor is not present 解决措施 首先确认windows功能是否打开Hyper-v 勾选后重启&#xff0c;再次启动 启动后仍报这个错误&#xff0c;是Hyper-v没有设置成功 使用cmd禁用再启用 一.禁用h…

Activiti7学习大纲及环境-Activiti7从入门到专家(2)

学习大纲 入门系列 开发环境及源码编译流程设计器核心API简单流程示例启动与结束事件边界事件中间事件用户任务手动任务接受任务服务任务脚本任务业务规则任务排他网关并行网关包容网关事件网关子流程调用活动泳池泳道执行监听器任务监听器全局监听器真实业务流程 进阶系列 …

基于react native的自定义轮播图

基于react native的自定义轮播图 效果示例图示例代码 效果示例图 示例代码 import React, {useEffect, useRef, useState} from react; import {Animated,PanResponder,StyleSheet,Text,View,Dimensions, } from react-native; import {pxToPd} from ../../common/js/device;c…

蓝桥集训之子矩阵

蓝桥集训之子矩阵 核心思想&#xff1a;二维单调队列 先求每一行中列长为B的区间的最值再在最值数组中求行长为A的区间的最值 –> 区间最值最后遍历所有最大最小值相乘的结果 #include <iostream>#include <cstring>#include <algorithm>using namespa…