前端科举八股文-REACT篇

前端科举八股文-REACT篇

  • vue和react有和异同?
  • useEffect中为什么不能使用异步函数?
  • useEffect和useLayoutEffect的区别
  • react的生命周期?
  • state和props的区别? 讲讲你的理解?
  • 受控组件和非受控组件的区别
  • 讲一下你理解的react事件机制?
  • 为什么react16之后不把事件挂载到document之后了?
  • 讲一下react的HOC
  • HOC可以用来做什么?
  • 讲讲你对react fiber的理解?
  • 讲讲react.component和react.pureComponents的区别
  • 讲一讲react的HOC?
  • 哪些操作会触发react的重新渲染,rerender的过程中会发生什么?
  • 如何理解react的hooks
  • hooks的使用限制?
  • react的性能优化方式?
  • react中的jsx转换成真实Dom的过程?
  • react项目中如何进行错误捕获?
  • 讲讲你对setState的理解(包括同步异步、执行机制)

vue和react有和异同?

相同点:
1、首先两个库都把主要的功能放在核心库,其他的附加功能可以交给第三方库,比如状态管理,路由管理,UI组件库等等
2、两个框架都有自己的脚手架工具,都可以很方便的搭建最佳实践项目
3、两个框架都使用了diff算法和虚拟dom来提高渲染效率
4、两个框架都提倡组件化开发项目

不同点
1、Vue中的双向绑定可以通过api来实现(v-modal),但是在react中需要手动实现双向绑定,比如在数据变化的时候去重新setState值。
2、在改变数据时,Vue会精准的更新状态值影响的组件,而react会更新当前组件以及它所有的子组件
3、实现响应式的方式不同,vue是通过劫持了数据的get和set方法,在set数据时去重新render视图。react组件是通过setState里面去调用更新视图的方法从而更新视图

useEffect中为什么不能使用异步函数?

1、useEffect中返回的函数需要在组件销毁时被调用,所以react需要在执行时就拿到这个返回值才能确定组件销毁时应该调用什么。
2、hooks执行有一个潜在逻辑,第二个useEffect执行必须等第一个执行完成之后才会执行,如果里面嵌套异步函数的话会使react组件的状态变化变得特别复杂且难以管理

useEffect和useLayoutEffect的区别

大多数情况下useEffect可以平替useLayoutEffect,只有某些时候需要计算组件元素布局的高宽时才需要使用到useLayoutEffect。useEffect是dom更新并且挂载到页面之后异步执行的。useLayoutEffect是在dom更新后,挂载到页面之前同步更新的。会阻塞页面的渲染(所以要慎用)。

react的生命周期?

可以根据react组件的生命周期给react分成三个不同的阶段。

	// 组件挂载constructor -> getDerivedStateFromProps -> render -> componentDidMount
	// 组件更新getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentdidupdate
	// 组件卸载componentWillUnmounted

介绍一个不太常用的周期getDerivedStateFromProps,这个hook在每次挂载和更新时都会调用,他是组件的实例方法,因此不能获取组件的this实例,他接受的参数是即将更新的props和未更新的state。他的返回值将作为组件最新的state来使用,可以结合shouldComponentUpdate来实现避免组件不必要的更新。

state和props的区别? 讲讲你的理解?

react的设计思想就是 UI= render(state),其中的这个state就是每个组件内部的状态数据,每个组件的视图都是根据这个状态数据来渲染的。而同时react又有组件化思想,有些组件可能依赖外部比如其他组件的数据,那么这些「传入」的数据就是props

受控组件和非受控组件的区别

顾名思义,受控组件就是受状态控制的组件,比如组件的input的value值绑定了一个state,然后state变化时,input的value值同步发生改变,非受控组件一般是指组件的初始化值受传入的值控制,但是在内部维护自己的状态,需要获取最新的值时需要通过ref来定位到dom来取值。

讲一下你理解的react事件机制?

react的jsx上绑定的所有以on开头的事件机制实际上都是react内部实现的。实现原理是将所有的事件统一冒泡到一个根元素上进行统一处理,在react16之前是document,在16之后是每个jsx的根结点上。
这样做的好处是不必在每个jsx节点上去处理事件,而是统一管理,大大的提升了性能。其二是因为不同浏览器对事件的处理方式是不同的,而react对事件进行统一处理,磨平了不同浏览器之间的差异对开发者更加友好。

为什么react16之后不把事件挂载到document之后了?

因为在项目中只有一个document,16之后把事件挂载到根节点上,不同组件的根结点肯定是不同的,这样可以使不同版本的react应用可以共存于一个页面而不会有冲突。更利于微前端技术的应用。

讲一下react的HOC

hoc就是高阶组件,高阶函数就是接受一个函数为参数,返回一个功能更强大的函数的前端技术。相比于vue的话其实react是更容易实现高阶组件的,因为每一个react组件就是一个函数,而vue还需要借助mixin来实现。

HOC可以用来做什么?

可以做条件渲染,比如传入组件和控制显示的变量来控制组件是否显示。还可以做权限控制,传入受权限控制的组件和权限然后在内部根据权限来控制组件的展示。

讲讲你对react fiber的理解?

react和vue的diff机制不同,由于vue在响应式处理data的时候同时进行了依赖收集,所以vue可以在更新的时候精确的更新对应组件,而react不同,它在setState的时候必须同时更新当前组件以及所有的子组件,在v16之前没有fiber的时候这个更新的动作是同步的,会一直占用浏览器的资源直到完成这个动作为止,而如果项目很大的情况下卡顿的现象会很明显。而16版本出现的fiber,本质就是一个链表结构的虚拟dom,它结合了一个h5的api,可以在浏览器空闲时机去碎片化的完成这个更新的动作,每一次更新会从上次停止的地方继续,因为每一个fiber都准确的记录了当前节点的父节点,兄弟节点,子节点。方便react可以从断点去继续执行任务。

讲讲react.component和react.pureComponents的区别

react在更新组件的时候,会递归的更新当前组件和它所有的子组件,但是很多时候,更新它的子组件是没有必要的,所以在之前我们可以通过在react.shouldComponentUpdate中返回false去避免不必要的更新,react的pureComponent字面意思就是纯组件,本质就是官方实现了shouldComponentUpdate的react组件,但是它在比较引用对象类型的时候是浅比较,只会比较更新前后是否指向同一片内存区域,而不会比较里面的每一个值是否相等。

讲一讲react的HOC?

HOC就是高阶组件,和JS的高阶函数有点类似,高阶函数就是接受一个函数为参数,返回另一个功能更强大的函数,那所谓的高阶组件就是接受一个函数为参数的组件,而react实现高阶函数要比vue要方便的多,因为react组件的本质就是一个函数,可以很轻易的实现高阶组件,而vue要实现高阶函数要借助mixin的特性。
高阶函数往往应用在条件渲染,权限判断,强化state或props等场景。

哪些操作会触发react的重新渲染,rerender的过程中会发生什么?

react类组件中的setState和hooks中useState返回值的第二个参数来改变组件的状态值都会触发state更新,forceUpdate强制更新组件也会触发组件更新,还有根组件的reactDom.render,或者redux的dispatch操作。
在重新渲染时会比较更新前后的两个vdom,diff算法的具体流程是首先会比较两个树的根节点(fiberRoot),如果根节点不同那么则判断整个树需要更新。如果相同则会判断节点的属性以及子节点,对于同级节点,可以通过key来提高diff算法的效率,递归的比较所有子节点之后会根据每个节点的状态和变化情况生成一组记录对象,最后在更新的时候会遍历这个对象一次性更新所有的变更。

如何理解react的hooks

在react编写组件有两种方式,类组件和函数式组件,在类组件中我们可以很轻易的去通过生命周期,状态去实现功能,在hook
我们可以在react的类组件里面很方便的使用state来定义内部状态,通过生命周期来执行对应的逻辑,在函数式组件里面我们需要通过结合hooks来实现对应的功能,除此之外,hooks也方便我们更轻松的实现代码复用以及逻辑抽象。

hooks的使用限制?

1、只能在函数组件内使用
2、不能在条件、循环中使用
关于第一点,因为hooks本身就是为了使函数组件更灵活所诞生的一套API,所以它是基于函数组件设计的,自然也就只能在函数组件内部使用。
关于第二点,react内部是通过链表来顺序执行hooks,如果在条件或者循环中去定义hooks就会破坏hooks链表的有序性导致程序混乱难以管理。

react的性能优化方式?

1、可以从避免组件无效渲染的方向去优化,可以通过shouldComponentUpdate,pureComponent,react.memo来避免组件的无效重复渲染
2、可以使用一些性能优化的hooks,比如react的useMemo,useCallBack,useMemo是将一个值缓存起来,当依赖项不变时,缓存值不会重新计算,有点类似于Vue的computed,useCallback用法和useMemo差不多,但是缓存的是一个函数,可以将传入子组件的函数用useCallback缓存起来来避免不必要的重复渲染
3、在列表渲染时给每一个列表项加上key,可以提高diff算法的执行效率
4、由于每个jsx只能有一个根节点,为了避免很多无意义的div元素,可以使用fragement来包裹jsx元素。
5、组件懒加载(lazy)
6、服务端渲染(没用过)

react中的jsx转换成真实Dom的过程?

jsx首先会经过babel转译,最终会转译成react.creatElement的形式,节点类型大致可以分成四个类型,原生dom节点,文本节点,函数组件,类组件,然后react.creatElement会根据参数的不同执行不同的渲染逻辑。

react项目中如何进行错误捕获?

react提供了一个很成熟的方案去捕获在编码时导致应用崩溃的错误代码。也就是react16提出的错误边界概念。错误边界本质是一个react组件,可以在组件中使用getDerivedStateFromError和componentdidCatch两个生命周期来生成一个错误边界组件。之后就可以用错误边界组件来包裹需要容错的组件(一般是根组件)来进行错误捕获。

讲讲你对setState的理解(包括同步异步、执行机制)

同步异步?
setState在调用的时候是同步执行的,但是引发react的状态更新是异步的。原因是如果是同步更新状态的话那么每调用一次setState就会触发一次状态更新再触发组件的rerender,如果是异步的话就可以把一次多次setState的值合并之后统一去触发状态改变,视图更新。效率会更高

调用setState发生了什么?
首先会把setState的参数与组件当前的状态合并起来,触发所谓的“调和”过程。
然后根据合并之后的状态构建最新的vdom树,将新树和原树做对比比较出所有节点的变化情况统一存储到一个对象中,最后根据这个对象去触发最小话更新。

在延时器和原生dom事件中是同步还是异步?为什么?
setState在生命周期和react合成事件中表现为异步,在原生dom事件和延时器等异步api中表现为同步的。
在react底层源码中,有一个isBatchUpdates字段来控制是否是批量更新state,默认值是false,但是在生命周期和react合成事件调用前会把这个参数变成true,也就是在这两个hooks里面,setState需要批量更新state,也就是表现为异步。

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

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

相关文章

vue动态绑定class的几种方式

第一种 基础用法 / <template><div :class"active"></div> </template><script setup> import { ref } from "vue"; const active ref(true); </script><style></style>第二种&#xff1a;三元运算法 …

GPT 大模型应用开发概览

随着大模型的风靡&#xff0c;越来越多的企业希望使用大模型来提高自己的服务能力&#xff0c;即在自己的软件中集成大模型的能力&#xff0c;希望让大模型解决一些特定的问题。 大模型的应用开发&#xff0c;其本质上是提示词工程&#xff0c;如何组好提示词&#xff0c;直接…

【Python的随机数汇总】

​我们写python代码的时候&#xff0c;很少能用得上随机数&#xff0c;但是随机数有很多妙用。例如&#xff0c;在我们做测试数据集的时候&#xff0c;可以构建一个随机的dataframe&#xff1b; 或者在保存数据的时候&#xff0c;可以在每条数据前插入一列作为&#xff0c;不重…

ASP .Net Core创建一个httppost请求并添加证书

ASP .Net Core创建一个httppost请求并添加证书 创建.net Core程序&#xff0c;使用自签名证书&#xff0c;可以处理https的get和post请求。 创建证书 创建自签名证书的流程可以在这里查看&#xff1a; https://blog.csdn.net/GoodCooking/article/details/139815278创建完毕…

充电学习— 9、Typec Pd

GND&#xff1a;线缆接地 TX RX&#xff1a;数据流data传输&#xff0c;支持2.0 3.0 speed兼容 VBUS&#xff1a;线缆cable电源&#xff0c;bus power CC&#xff1a;电缆cable的连接、方向、角色检测和当前模式的配置通道&#xff1b; 有emark时&#xff0c; 一个成为VCONN&am…

Aidlux 1.4 部署homeassistant core 2024.6实录

1 Aidlux 安装 Index of /apk/ (aidlux.com) 基于debain 10.1&#xff0c;改不了内核参数用不了docker&#xff0c;用initd管理而不是systemd&#xff0c;阉割版系统很多安装依赖项要自己摸索补全。 # 1 由于您的系统使用的是 SysVinit 而不是 systemd&#xff0c;更改时区。…

易基因:MeRIP-seq等揭示RNA m6A去甲基化酶调控植物雄性不育的分子机制 | 科研速递

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 水稻是全球重要的农作物&#xff0c;也是单子叶植物模型。在水稻中&#xff0c;N6-甲基腺苷&#xff08;m6A&#xff09;mRNA修饰对植物的发育和胁迫响应至关重要。OsFIP37作为m6A甲基化…

线程间通信(生产者和消费者案例)

一、传统的线程间通信的方式 使用 Object: synchronized&#xff1a;阻塞锁 wait()&#xff1a;阻塞当前队列 notifyAll()&#xff1a;唤醒所有阻塞队列 package ProduceAndConsumer;/** Auther:生产者消费者案例1* Date:2024/6/20* Description:qinhao* VERSON:1.8*/public…

聊聊其他之ShowDoc安装部署

聊聊其他之ShowDoc安装部署 Docker离线安装部署 由于很多公司服务器处于内网环境&#xff0c;跟外网阻断&#xff0c;所以需要通过离线的方式进行Docker镜像安装。 Linux环境准备 第一步&#xff1a;检查防火墙&#xff0c;是否关闭。 查看防火墙状态&#xff1a; [rootlo…

【第22章】Vue实战篇之文章分类

文章目录 前言一、文章分类列表查询1. 界面2. 脚本3. 展示 二、文章分类添加1. 界面2. 接口脚本3. 点击事件 三、文章分类编辑1. 界面2. 接口脚本3. 点击事件 四、文章分类删除1. 界面2. 接口脚本3. 点击事件 总结 前言 这里来学习文章分类相关界面和接口的调用(增删改查)。 一…

含铬废水有哪些危害?含铬废水怎么处理呢?

铬化物可以通过消化道、呼吸道、皮肤和粘膜侵人人体&#xff0c;主要积聚在肝、肾、内分泌系统和肺部。毒理作用是影响体内物质氧化、还原和水解过程&#xff0c;与核酸、核蛋白结合影响组织中的磷含量。铬化合物具有致癌作用。 铬化合物以蒸汽和粉尘的方式进入人体组织中&…

低版本火狐浏览器报错:class is a reserved identifier

低版本火狐浏览器报错&#xff1a;class is a reserved identifier 原因&#xff1a;react-dnd&#xff0c;dnd-core 等node包的相关依赖有过更新&#xff0c;使得在低版本火狐浏览器中不支持 class 解决方法&#xff1a;在使用webpack打包构建时&#xff0c;编译排除node_modu…

javaweb中ServletContext的使用

一.ServletContext 它一个为整个 web 应用程序提供视图的接口&#xff0c;允许 servlet 之间共享信息。这是一个在 web 应用程序范围内被共享的对象&#xff0c;任何在这个应用中的 servlet 都可以访问它&#xff0c;常用于不同servlet之间的数据共享。 二.作用与功能 …

每日复盘-202406020

今日关注&#xff1a; 20240620 六日涨幅最大: ------1--------300462--------- 华铭智能 五日涨幅最大: ------1--------300462--------- 华铭智能 四日涨幅最大: ------1--------300462--------- 华铭智能 三日涨幅最大: ------1--------300462--------- 华铭智能 二日涨幅最…

基于DE2-115平台的VGA显示实验

一.任务需求 深入了解VGA协议&#xff0c;理解不同显示模式下的VGA控制时序参数&#xff08;行频、场频、水平/垂直同步时钟周期、显示后沿/前沿等概念和计算方式&#xff09;&#xff1b;通过Verilog编程&#xff0c;在至少2种显示模式下&#xff08;64048060Hz,102476875Hz&…

惠海H4120 降压IC 40V 36V 30V降压5V3A 9V3A 12V3A 动态响应优异,低纹波

H4120是一款功能优良的异步降压型DC-DC转换器。它的主要特性和优势如下&#xff1a; 产品特性&#xff1a; 内置40V耐压MOS&#xff1a;内置的高耐压MOS使得H4120能够处理更多种的输入电压范围&#xff0c;增强了其适用性和可靠性。 宽输入范围&#xff1a;输入电压可在5V至…

基于SpringBoot+Vue电影推荐系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

MySQL 保姆级教程(八):创建计算字段

第 10 章 创建计算字段 10.1 计算字段 直接从数据库中检索出转换、计算或格式化过的数据 10.2 拼接字段 拼接: 将值联结到一起构成单个值 ​ 输入: SELECT CONCAT(database_name, date:,last_update) FROM innodb_index_stats ORDER BY database_name; 输出: ------------…

dns域名使用配置

域名解析配置到dns服务器10.243.xx.105上 1.systemctl status dhcpd 2.vim /etc/named.conf zone "aws.com." { type master; file "aws.com"; }; 3./var/named/chos.com $TTL 300 IN SOA 10.243.xx.105. nobody.…

安装Xshell和Xftp后,打开程序下无法使用,要继续使用此程序,您必须应用最新的更新或使用新版本。

之前我遇到这种情况的时候&#xff0c;修改了nslicense.dll&#xff0c;结果这次重新下载结果把修改代码给忘了&#xff08;因为我也不会这个&#xff09;&#xff0c;于是我用了最直接的办法去官网找最新版本下载&#xff1a;xshell/xftp官网 后面直接点下载&#xff0c;然后开…