前端面试题-react

1 React 中 keys 的作⽤是什么?

Keys 是 React ⽤于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识
  • 在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯⼀性。在 React
    Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动⽽来
    的元素,从⽽减少不必要的元素重渲染。此外,React 还需要借助 Key 值来判断元素与
    本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性

2 传⼊ setState 函数的第⼆个参数的作⽤是什么?

该函数会在 setState 函数调⽤完成并且组件开始重渲染的时候被调⽤,我们可以⽤该函数来监听渲染是否完成:
this.setState(
{ username: 'tylermcginnis33' },
() => console.log('setState has finished and the component has re-rendere
)
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})

3 React 中 refs 的作⽤是什么

  • Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄
  • 可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为
    回调函数的第⼀个参数返回

4 在⽣命周期中的哪⼀步你应该发起 AJAX 请求

我们应当将AJAX 请求放到 componentDidMount 函数中执⾏,主要原因有下
  • React 下⼀代调和算法 Fiber 会通过开始或停⽌渲染的⽅式优化应⽤性能,其会影响
    到 componentWillMount 的触发次数。对于 componentWillMount 这个⽣命周期函数
    的调⽤次数会变得不确定, React 可能会多次频繁调⽤ componentWillMount 。如果我
    们将 AJAX 请求放到 componentWillMount 函数中,那么显⽽易⻅其会被触发多次,⾃
    然也就不是好的选择。
  • 如果我们将 AJAX 请求放置在⽣命周期的其他函数中,我们并不能保证请求仅在组件挂载
    完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成,并且调⽤了
    setState 函数将数据添加到组件状态中,对于未挂载的组件则会报错。⽽在
    componentDidMount 函数中进⾏ AJAX 请求则能有效避免这个问题

5 shouldComponentUpdate 的作⽤

shouldComponentUpdate 允许我们⼿动地判断是否要进⾏组件更新,根据组件的应⽤场景设置函数的合理返回值能够帮我们避免
不必要的更新

6 如何告诉 React 它应该编译⽣产环境版

通常情况下我们会使⽤ Webpack 的 DefinePlugin ⽅法来将 NODE_ENV变量值设置为 production 。编译版本中 React 会忽略propType 验证以及其他的告警信息,同时还会降低代码库的⼤⼩, React 使⽤了 Uglify插件来移除⽣产环境下不必要的注释等信息

7 概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题, React 会将浏览器原⽣事件( BrowserNative Event )封装为合成事件( SyntheticEvent )
传⼊设置的事件处理器中。这⾥的合成事件提供了与原⽣事件相同的接⼝,不过它们屏蔽了底层浏览器的细节差异,保证了⾏为的⼀致
性。另外有意思的是, React 并没有直接将事件附着到⼦元素上,⽽是以单⼀事件监听器的⽅式将所有的事件发送到顶层进⾏
处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器,最终达到优化性能的⽬的

8 createElement 与 cloneElement 的区别是什么

createElement 函数是 JSX 编译之后使⽤的创建 React Element 的函数,⽽ cloneElement 则是⽤于复制某个元素并传
⼊新的 Props

9 redux中间件

中间件提供第三⽅插件的模式,⾃定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机
制可以让我们改变数据流,实现如异步 action , action 过滤,⽇志输出,异常报告等功能
  • redux-logger :提供⽇志输出
  • redux-thunk :处理异步操作
  • redux-promise :处理异步操作, actionCreator 的返回值是 promise

10 redux有什么缺点

  • ⼀个组件所需要的数据,必须由⽗组件传过来,⽽不能像 flux 中直接从 store 取。
  • 当⼀个组件相关数据更新时,即使⽗组件不需要⽤到这个组件,⽗组件还是会重新
    render ,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进⾏判断。

11 react组件的划分业务组件技术组件?

  • 根据组件的职责通常把组件分为UI组件和容器组件。
  • UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
  • 两者通过 React-Redux 提供 connect ⽅法联系起来

12 react⽣命周期函数

初始化阶段

  • getDefaultProps :获取实例的默认属性
  • getInitialState :获取每个实例的初始化状态
  • componentWillMount :组件即将被装载、渲染到⻚⾯上
  • render :组件在这⾥⽣成虚拟的 DOM 节点
  • omponentDidMount :组件真正在被装载之后

运⾏中状态

  • componentWillReceiveProps :组件将要接收到属性的时候调⽤
  • shouldComponentUpdate :组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻⽌ render 调⽤,后⾯的函数不会被继续执⾏了)
  • componentWillUpdate :组件即将更新不能修改属性和状态
    render :组件重新描绘
  • componentDidUpdate :组件已经更新

销毁阶段

  • componentWillUnmount :组件即将销毁

13 react性能优化是哪个周期函数

shouldComponentUpdate 这个⽅法⽤来判断是否需要调⽤render⽅法重新描
绘dom。因为dom的描绘⾮常消耗性能,如果我们能在
shouldComponentUpdate⽅ 法中能够写出更优化的 dom diff 算法,可以极
⼤的提⾼性能

14 为什么虚拟dom会提⾼性能

虚拟 dom 相当于在 js 和真实 dom 中间加了⼀个缓存,利⽤ dom diff 算法避免了没有必要的 dom 操作,从⽽提⾼性能

具体实现步骤如下

  • ⽤ JavaScript 对象结构表示 DOM 树的结构;然后⽤这个树构建⼀个真正的 DOM 树,
    插到⽂档当中
  • 当状态变更的时候,重新构造⼀棵新的对象树。然后⽤新的树和旧的树进⾏⽐较,记录两
    棵树差异
  • 把2所记录的差异应⽤到步骤1所构建的真正的 DOM 树上,视图就更新

15 diff算法?

  • 把树形结构按照层级分解,只⽐较同级元素。
  • 给列表结构的每个单元添加唯⼀的 key 属性,⽅便⽐较。
  • React 只会匹配相同 class 的 component (这⾥⾯的 class 指的是组件的名字)
  • 合并操作,调⽤ component 的 setState ⽅法的时候, React 将其标记为 - dirty .
    到每⼀个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
  • 选择性⼦树渲染。开发⼈员可以重写 shouldComponentUpdate 提⾼ diff 的性能

16 react性能优化⽅案

  • 重写 shouldComponentUpdate 来避免不必要的dom操作
  • 使⽤ production 版本的 react.js
  • 使⽤ key 来帮助 React 识别列表中所有⼦组件的最⼩变化

17 简述flux 思想

 Flux 的最⼤特点,就是数据的"单向流动"。
  • ⽤户访问 View
  • View 发出⽤户的 Action
  • Dispatcher 收到 Action ,要求 Store 进⾏相应的更新
  • Store 更新后,发出⼀个 “change” 事件
  • View 收到 “change” 事件后,更新⻚⾯

18 说说你⽤react有什么坑点?

  1. JSX做表达式判断时候,需要强转为boolean类型

    如果不使⽤ !!b 进⾏强转数据类型,会在⻚⾯⾥⾯输出 0 。
    
render() {
const b = 0;
return <div>
{
!!b && <div>这是⼀段⽂本</div>
}
</div>
}
  1. 尽量不要在 componentWillReviceProps ⾥使⽤ setState,如果⼀定要使⽤,那么需要判
    断结束条件,不然会出现⽆限重渲染,导致⻚⾯崩溃
  2. 给组件添加ref时候,尽量不要使⽤匿名函数,因为当组件更新的时候,匿名函数会被当做
    新的prop处理,让ref属性接受到新函数的时候,react内部会先清空ref,也就是会以null为回
    调参数先执⾏⼀次ref这个props,然后在以该组件的实例执⾏⼀次ref,所以⽤匿名函数做ref
    的时候,有的时候去ref赋值后的属性会取到null
  3. 遍历⼦节点的时候,不要⽤ index 作为组件的 key 进⾏传⼊

19 我现在有⼀个button,要⽤react在上⾯绑定点击事件,要怎么做?


class Demo {
render() {
return <button onClick={(e) => {
alert('我点击了按钮')
}}>
按钮
</button>
}
}

你觉得你这样设置点击事件会有什么问题吗?

由于 onClick 使⽤的是匿名函数,所有每次重渲染的时候,会把该onClick 当做⼀个新的 prop 来处理,会将内部缓存的 
onClick 事件进⾏重新赋值,所以相对直接使⽤函数来说,可能有⼀点的性能下降

修改


class Demo {
onClick = (e) => {
alert('我点击了按钮')
}
render() {
return <button onClick={this.onClick}>
按钮
</button>
}

20 react 的虚拟dom是怎么实现的

⾸先说说为什么要使⽤ Virturl DOM ,因为操作真实 DOM 的耗费的性能代价太⾼,所以 react 内部使⽤ js 实现了⼀套dom结构,
在每次操作在和真实dom之前,使⽤实现好的diff算法,对虚拟dom进⾏⽐较,递归找出有变化的dom节点,然后对其进⾏更新操作。
为了实现虚拟 DOM ,我们需要把每⼀种节点类型抽象成对象,每⼀种节点类型有⾃⼰的属性,也就是prop,每次进⾏ diff 的时候, react 会先⽐较该节点类型,假如节点类型不⼀样,那么react 会直接删除该节点,然后直接创建新的节点插⼊到其中,假如节点类型
⼀样,那么会⽐较 prop 是否有更新,假如有 prop 不⼀样,那么 react会判定该节点有更新,那么重渲染该节点,然后在对其⼦
节点进⾏⽐较,⼀层⼀层往下,直到没有⼦节点

21 react 的渲染过程中,兄弟节点之间是怎么处理的?也就是key值不⼀样的时候

通常我们输出节点的时候都是map⼀个数组然后返回⼀个 ReactNode ,为了⽅便 react 内部进⾏优化,我们必须给每⼀个 
reactNode 添加 key ,这个 key prop 在设计值处不是给开发者⽤的,⽽是给react⽤的,⼤概的作⽤就是给每⼀个 reactNode添加⼀个身份标识,⽅便react进⾏识别,在重渲染过程中,如果key⼀样,若组件属性有所变化,则 react 只更新组件对应的属性;没有变化则不更新,如果key不⼀样,则react先销毁该组件,然后重新创建该组件

22 那给我介绍⼀下react

  1. 以前我们没有jquery的时候,我们⼤概的流程是从后端通过ajax获取到数据然后使⽤jquery
    ⽣成dom结果然后更新到⻚⾯当中,但是随着业务发展,我们的项⽬可能会越来越复杂,
    我们每次请求到数据,或则数据有更改的时候,我们⼜需要重新组装⼀次dom结构,然后
    更新⻚⾯,这样我们⼿动同步dom和数据的成本就越来越⾼,⽽且频繁的操作dom,也使
    我我们⻚⾯的性能慢慢的降低。
  2. 这个时候mvvm出现了,mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更
    新,dom的更新也可以直接同步我们数据的更改,这个特定可以⼤⼤降低我们⼿动去维护
    dom更新的成本,mvvm为react的特性之⼀,虽然react属于单项数据流,需要我们⼿动实
    现双向数据绑定。
  3. 有了mvvm还不够,因为如果每次有数据做了更改,然后我们都全量更新dom结构的话,也
    没办法解决我们频繁操作dom结构(降低了⻚⾯性能)的问题,为了解决这个问题,react内
    部实现了⼀套虚拟dom结构,也就是⽤js实现的⼀套dom结构,他的作⽤是讲真实dom在js
    中做⼀套缓存,每次有数据更改的时候,react内部先使⽤算法,也就是鼎鼎有名的diff算
    法对dom结构进⾏对⽐,找到那些我们需要新增、更新、删除的dom节点,然后⼀次性对
    真实DOM进⾏更新,这样就⼤⼤降低了操作dom的次数。 那么diff算法是怎么运作的呢,
    ⾸先,diff针对类型不同的节点,会直接判定原来节点需要卸载并且⽤新的节点来装载卸载
    的节点的位置;针对于节点类型相同的节点,会对⽐这个节点的所有属性,如果节点的所
    有属性相同,那么判定这个节点不需要更新,如果节点属性不相同,那么会判定这个节点
    需要更新,react会更新并重渲染这个节点。
  4. react设计之初是主要负责UI层的渲染,虽然每个组件有⾃⼰的state,state表示组件的状
    态,当状态需要变化的时候,需要使⽤setState更新我们的组件,但是,我们想通过⼀个组
    件重渲染它的兄弟组件,我们就需要将组件的状态提升到⽗组件当中,让⽗组件的状态来
    控制这两个组件的重渲染,当我们组件的层次越来越深的时候,状态需要⼀直往下传,⽆
    疑加⼤了我们代码的复杂度,我们需要⼀个状态管理中⼼,来帮我们管理我们状态state。
  5. 这个时候,redux出现了,我们可以将所有的state交给redux去管理,当我们的某⼀个state
    有变化的时候,依赖到这个state的组件就会进⾏⼀次重渲染,这样就解决了我们的我们需
    要⼀直把state往下传的问题。redux有action、reducer的概念,action为唯⼀修改state的
    来源,reducer为唯⼀确定state如何变化的⼊⼝,这使得redux的数据流⾮常规范,同时也
    暴露出了redux代码的复杂,本来那么简单的功能,却需要完成那么多的代码。
  6. 后来,社区就出现了另外⼀套解决⽅案,也就是mobx,它推崇代码简约易懂,只需要定义
    ⼀个可观测的对象,然后哪个组价使⽤到这个可观测的对象,并且这个对象的数据有更
    改,那么这个组件就会重渲染,⽽且mobx内部也做好了是否重渲染组件的⽣命周期
    shouldUpdateComponent,不建议开发者进⾏更改,这使得我们使⽤mobx开发项⽬的时
    候可以简单快速的完成很多功能,连redux的作者也推荐使⽤mobx进⾏项⽬开发。但是,
    随着项⽬的不断变⼤,mobx也不断暴露出了它的缺点,就是数据流太随意,出了bug之后
    不好追溯数据的流向,这个缺点正好体现出了redux的优点所在,所以针对于⼩项⽬来说,
    社区推荐使⽤mobx,对⼤项⽬推荐使⽤redux

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

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

相关文章

第十三章 利用PCA简化数据

文章目录 第十三章 利用PCA简化数据13.1降维技术13.2PCA13.2.1移动坐标轴 13.2.2在NumPy中实现PCA13.3利用PCA对半导体制造数据降维 第十三章 利用PCA简化数据 PCA&#xff08;Principal Component Analysis&#xff0c;主成分分析&#xff09;是一种常用的降维技术&#xff0…

剑指offer41.数据流中的中位数

我一开始的想法是既然要找中位数&#xff0c;那肯定要排序&#xff0c;而且这个数据结构肯定要能动态的添加数据的&#xff0c;肯定不能用数组&#xff0c;于是我想到了用优先队列&#xff0c;它自己会排序都不用我写&#xff0c;所以addNum方法直接调用就可以&#xff0c;但是…

MAC电脑设置charles,连接手机的步骤说明(个人实际操作)

目录 一、charles web端设置 1. 安装charles之后&#xff0c;先安装证书 2. 设置 Proxy-Proxy Settings 3. 设置 SSL Proxying 二、手机的设置 1. 安卓 2. ios 资料获取方法 一、charles web端设置 1. 安装charles之后&#xff0c;先安装证书 Help-SSL Proxying-Inst…

sql group by 加条件

在SQL中&#xff0c;可以在GROUP BY子句中加入条件&#xff0c;以进一步过滤结果。你可以使用HAVING子句来添加条件。HAVING子句的使用方式类似于WHERE子句&#xff0c;但不同的是&#xff0c;它用于对GROUP BY子句生成的分组进行过滤。 以下是一个示例&#xff0c;演示如何在…

优化基于tcp,socket的ftp文件传输程序

原始程序&#xff1a; template_ftp_server_old.py&#xff1a; import socket import json import struct import os import time import pymysql.cursorssoc socket.socket(socket.AF_INET, socket.SOCK_STREAM) HOST 192.168.31.111 PORT 4101 soc.bind((HOST,PORT)) p…

是面试官放水,还是公司实在是太缺人?这都没挂,华为原来这么容易进...

华为是大企业&#xff0c;是不是很难进去啊&#xff1f;” “在华为做软件测试&#xff0c;能得到很好的发展吗&#xff1f; 一进去就有9.5K&#xff0c;其实也没有想的那么难” 直到现在&#xff0c;心情都还是无比激动&#xff01; 本人211非科班&#xff0c;之前在字节和腾讯…

Centos/Ubuntu 替换yum/apt源?

yum/apt源如果不满足要求, 可以考虑将源替换为阿里云的源。 1.CentOS更换阿里云yum源 1. 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base-bak.repo 2. 下载 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cent…

iphone卡在恢复模式怎么办?修复办法分享!

iPhone 卡在恢复屏幕问题是 iPhone 用户在软件更新或恢复期间的常见问题。如果你也遇到此问题&#xff0c;不要着急&#xff0c;接下来我们将探讨 iPhone 卡在恢复屏幕上的主要原因&#xff0c;以及如何轻松修复它。 iPhone卡在恢复屏幕问题上没有一个特别的原因&#xff0c;但…

数字资产管理是做什么的?

显然&#xff0c;单纯依靠人力来管理和盘点固定资产已经不能满足公司日益增长的需求。合理使用固定资产管理系统来帮助管理实物资产已经成为一种趋势。  有鉴于此&#xff0c;依靠信息技术的支持&#xff0c;选择RFID固定资产管理系统可以有效解决资产管理盘点等难题&#xf…

Maven右侧依赖Dependencies消失

项目右侧的Maven依赖Dependencies突然消失&#xff0c;项目中的注解都出现报错&#xff0c;出现这种情况应该是因为IDEA版本早于maven版本&#xff0c;重新检查项目中的Maven路径&#xff0c;选择File->Settings->搜索Maven&#xff0c;检查Maven home directory&#xf…

可以写进简历的kafka优化-----吞吐量提升一倍的方法

冲突 在看到项目工程里kafka 生产端配置的batch.size为500&#xff0c;而实际业务数据平均有1K大小的时候&#xff1b;我有点懵了。是的&#xff0c;这里矛盾了&#xff1b;莫非之前的作者认为这个batch.size是发送的条数&#xff0c;而不是kafka生产端内存缓存记录的大小&…

GDAL C++ API 学习之路 (7) Dataset篇 代码示例 翻译 自学

CreateLayer virtual OGRLayer *CreateLayer(const char *pszName, OGRSpatialReference *poSpatialRef nullptr, OGRwkbGeometryType eGType wkbUnknown, char **papszOptions nullptr) 此方法尝试在数据集上创建一个具有指定名称、坐标系、几何类型的新图层 参数: pszN…

HackSudo2靶机 通关详解

环境配置 发现vmWare的kali扫不到virtualbox的靶机 网上找了挺久资料都没解决 索性全桥接上物理机了 信息收集 漏洞发现 扫个目录 都看了一眼 没什么有用的 然后回到file.php 感觉之前做过类似的靶场,猜测存在文件包含 随便传个file试试 确实有 考虑日志文件包含 之前看…

hbase优化:客户端、服务端、hdfs

hbase优化 一.读优化 1.客户端&#xff1a; scan。cache 设置是否合理&#xff1a;大scan场景下将scan缓存从100增大到500或者1000&#xff0c;用以减少RPC次数使用批量get进行读取请求离线批量读取请求设置禁用缓存&#xff0c;scan.setBlockCache(false)以指定列族或者列进行…

Spring Framework 提供缓存管理器Caffeine

说明 Spring Framework 提供了一个名为 Caffeine 的缓存管理器。Caffeine 是一个基于 Java 的高性能缓存库&#xff0c;被广泛用于处理大规模缓存数据。 使用 Caffeine 缓存管理器&#xff0c;可以轻松地在 Spring 应用程序中添加缓存功能。它提供了以下主要特性&#xff1a;…

《2023中国开发者调查报告》探索2023中国开发者的技术创新与挑战:AIoT、云原生、国产数据库等领域的发展与前景

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

算法之桶排序算法

桶排序的基本思想是&#xff1a; 把数组 arr 划分为 n 个大小相同子区间&#xff08;桶&#xff09;&#xff0c;每个子区间各自排序&#xff0c;最 后合并 。计数排序是桶排序的一种特殊情况&#xff0c;可以把计数排序当成每个桶里只有一个元素的情况。 1.找出待排序数组中的…

【AI之路】使用huggingface_hub优雅解决huggingface大模型下载问题

文章目录 前言一、Hugging face是什么&#xff1f;二、准备工作三、下载整个仓库或单个大模型文件1. 下载整个仓库2. 下载单个大模型文件 总结附录 前言 Hugging face 资源很不错&#xff0c;可是国内下载速度很慢&#xff0c;动则GB的大模型&#xff0c;下载很容易超时&#…

无涯教程-jQuery - load( url, data, callback)方法函数

load(url&#xff0c;data&#xff0c;callback)方法从服务器加载数据&#xff0c;并将返回的HTML放入匹配的元素中。 load( url, [data], [callback] ) - 语法 [selector].load( url, [data], [callback] ) 这是此方法使用的所有参数的描述- url - 包含请求发送到…

Meta AI研究团队新AI模型:Segment Anything图像分割任务

Segment Anything是Meta AI研究团队开发的一种新的AI模型&#xff0c;用于图像分割任务。该模型可以对任何图像中的任何对象进行分割&#xff0c;即将对象从图像中"剪切"出来。Segment Anything模型&#xff08;SAM&#xff09;是一个可提示的模型&#xff0c;可以根…