React中常见的面试题

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢!

1. 约束性组件与非约束性组件

1.1. 非约束性组件

非约束性组件其实就是不能控制状态的组件,比如:

<input type="text" defaultValue="123" onChange={handleChange}>

在这里我们可以输入value值,也可以根据输入的值在change回调里面处理逻辑,但是我们无法控制value值

1.2. 约束性组件

约束性组件就是我们可以直接控制组件的value值或者显示结果的组件,比如:

<input type="text" value={this.state.value} onChange={handleChange}>

在这里我们可以直接控制value值的显示,可以在第三方逻辑中处理value值然后修改显示结果

 

2. 高阶组件 HOC

高阶组件本质是一个函数。它可以接收一个组件作为参数,然后返回处理完逻辑处理结果之后返回一个新的组件。

高阶组件通常用于处理一些比如路由守卫封装或者表单组件的逻辑复用封装,比如封装一个弹出窗:

显示页面:

import ModalFn from "../../Component/index.tsx"
import { Modal } from 'antd';
const ModalExtend = ModalFn(Modal)
function Test() {return <div><ModalExtend /></div>
}export default Test

封装逻辑:

import { Button } from 'antd';
import React from 'react';export default function ModalFn(Modal) {return class ModalExtend extends React.PureComponent {state = {isModalOpen: false}//显示弹出窗handleShowModal = () => {this.setState({isModalOpen: true})}//确定按钮handleOk = () => {}//取消按钮handleCancel = () => {this.setState({isModalOpen: false})}render(): React.ReactNode {const ModalProps = {open: this.state.isModalOpen,onOk: this.handleOk,onCancel: this.handleCancel,title: "Basic Modal"}return (<><Button type="primary" onClick={this.handleShowModal}>Open Modal</Button><Modal {...ModalProps} /></>)}}
}

展示效果:

 

2e73050cd669bc124d2ca26ec6d406c7.png

不过我们通常不会这么做,我们做antd的二次封装只要传递参数即可,只不过一般的二次封装的思路都是学习自高阶组件

 

3. React路由

现在前端的项目一般都是SPA单页面应用,不再是以前多个页面多套HTML代码项目了,应用内的跳转不需要刷新页面就能完成页面跳转靠的就是路由系统

React路由系统分为BrowerRouter路由和HashRouter路由,分别表现为:

  • BrowerRouter路由: 就像平常网站www.baidu.com/test 这就是一个路由,在服务器渲染的时候需要后端做映射
  • HashRouter 路由: 比BrowerRouter多出了一个#符号,使用URL的哈希值实现,比如www.baidu.com/#/test,不需要后端做URL映射

可能会问到路由拦截(也就是路由守卫)的问题,这里不详细介绍,可以看看我之前发的React路由文章

 

4. React diff算法和虚拟DOM

diff算法是React实现组件差异化更新的核心逻辑之一,它与虚拟DOM是相辅相成的存在,正因为有了虚拟DOM才有diff的可能性

虚拟DOM本质上是JS到DOM之间的一个映射缓存，它在形态上表现为一个能够描述DOM树结构和属性信息的JS对象，如下图所示：

function Test(){return(<div className='aaa'>React</div>)
}

 

7a76a530e9bdda41254a04b0459b5832.png

diff算法: diff算法的本身是VirtualDOM 在render的时候差量更新时需要进行比对需要更新哪些节点的一个产物,diff是递归更新虚拟DOM树的,一旦开始不可以暂停打断

更详细的diff算法和解释可以看看我之前发的React diff算法与虚拟DOM

5. React 性能优化

React性能优化一般有两种情况,类组件性能优化和函数组件性能优化,更多详细内容可以看看我之前写的React性能优化专题

5.1. 类组件:

PurComponent : 类组件可以继承React.PurComponent 组件,PurComponent组件在shouldComponentUpdate里面对组件state、props更新渲染做了浅比较

Immutable.js : Immutable 是Facebook推出的用来给数据做持久性优化的库,配合PurComponent使用的话可以进行组件更新渲染的深层次比较,避免组件无意义的二次渲染

5.2. 函数组件

React.memo:

React.memo 的使用方式相比immutable更加简单一些.它本质上是一个高阶组件,直接包裹住要声明的函数组件即可,内部也是浅比较,与PurComponent类似

useMemo:

React.memo的特性和用法,缺点很明显,无法感知组件内部的state,还有就是不能控制单一的某一段逻辑,所以官方建议使用useMemo加强深比较的能力,useMemo用法就是传递2个参数:第一个是需要渲染的内容,第二个参数是一个状态,根据这个状态是否变化来决定这段内容的更新与否

 

6. React 数据持久化

有一些面试官不会直接问状态管理容器redux、mobx之类的,会直接问你了解React数据持久化么?

一般的第三方数据持久化库都是用localStorage 或 AsyncStorage来进行存储数据的,我这里以redux-persist + @reduxjs/toolkit为例:

安装:

yarn add redux-persist
yarn add react-redux
yarn add @reduxjs/toolkit

配置src/store.ts

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import HomeReducer from './models/home'import { persistStore, persistReducer } from 'redux-persist'
// 选择持久化存储引擎，如 localStorage 或 AsyncStorage
import storage from 'redux-persist/lib/storage' // 默认使用localStorage作为存储引擎// 组合各个模块的reducer
const reducer = combineReducers({Home: HomeReducer
})// 配置持久化设置
const persistConfig = {key: 'root', // 存储的键名storage,// 持久化存储引擎// 可选的配置项，如白名单、黑名单等 选其一就好了// blacklist:['Home'], // 只有 Home 不会被缓存whitelist: ["Home"], // 只有 Home 会被缓存
}const persistedReducer = persistReducer(persistConfig, reducer)export const store = configureStore({reducer: persistedReducer, // 注册子模块middleware: (getDefaultMiddleware) =>getDefaultMiddleware({serializableCheck: false // 关闭默认的序列化检查//关闭严格模式})
})export const persistor = persistStore(store)

配置src/models/HomeReducer

import { createSlice } from '@reduxjs/toolkit'// 定义状态类型  
interface Action {payload: number,type: string
}
interface State {count: number
}export const HomeStore = createSlice({// 模块名称独一无二name: 'home',// 初始数据initialState: {count: 1},// 修改数据的同步方法reducers: {increment: (state: State, action: Action) => {state.count += action.payload},decrement: (state: State, action: Action) => {state.count -= action.payload},}
})// 导出
export const { increment, decrement } = HomeStore.actions
export default HomeStore.reducer

配置好了以后:

 

1a044ae9977062de57711d2db2d0a34f.png

刷新没有变化

 

298b677810b22396e9ef30db37f8f77e.png

mac不太方便做GIF,过程也很简单,大家可以create一个demo自己尝试一下

 

7. React Hooks

Hooks基本上也是属于热门面试问答题,主要涉及到几个方面:常用的Hooks钩子、Hooks组件与类组件的区别、自定义Hooks、Hooks的逻辑复用

内容太多这里就不详细描述了.有兴趣的同学可以直接跳转查看详细内容React Hooks专题

 

8. React Fiber架构

React Fiber架构是16.x之后更新的,目的是为了重写原来的React 15以及之前版本的调和过程,这里做一个简短的描述,更多详细内容可以查阅React Fiber专题

8.1. React 15及更老版本 diff算法

React 15中的diff算法采用的是分层递归方式查找更新过程中有差异的一些DOM节点,主要是基于虚拟DOM节点树来递归查询,其主逻辑有以下几个部分组成:(此处简单介绍,详细内容可查阅React diff算法专题)

  1. 首先判断是否存在旧的虚拟DOM树节点,没有的话直接创建新虚拟DOM树
  2. 判断旧的虚拟DOM是否与新的虚拟DOM类型一致,不一致重新创建
  3. 判断旧的虚拟DOM是否为组件,如果为组件又要在内部逻辑判断是否为同组件更新等等
  4. 如果旧的虚拟DOM与新的虚拟DOM类型一致(高频diff类型),如果存在key值则用key值进行操作,比如移动位置新增一个节点等等,如果不存在key值,那么只能使用diff重新递归更新。当我们没有在批量生成节点的时候标记key值,React官方会给我们抛出一个warning,提示我们必须使用key,否则将影响应用性能

 

React 15下的diff算法由于采用的是递归的形式,一旦开始不可以暂停/结束,只能等待任务完成,那么我们在更新一个比较庞大的任务的时候,往往会带来页面卡死/卡顿等问题,为了解决这个问题React官方在16版本推出Fiber架构

8.2. React Fiber

Fiber架构推出的原因上面我们上面已经讲过了,主要是为了解决diff算法递归到底不回头的问题,我们先来看看Fiber的特点

Fiber架构的核心: 可中断、可恢复、优先级

在 React 16 之前，React 的渲染和更新阶段依赖的是如下图所示的两层架构：

8df0b6cdf3ba567f7e9815a072db207e.jpeg

而在 React 16 中，为了实现“可中断”和“优先级”，两层架构变成了如下图所示的三层架构：

a15000df2029d54ccb75813f33001e0c.jpeg

对比React15多出了一个Scheduler(优先级调度器),调度器的作用是,每次触发更新的时候调度更新的优先级。

比如有一个更新任务B抵达调度器,调度器将其塞入Reconciler层,此时又有一个更新任务A抵达,调度器发现A的优先级高于B,那么就会中断B的更新,优先更新A,等A执行完了之后,再将中断的B重新加入Reconciler层,继续它的渲染流程,这就是可恢复

 

Fiber结构的本质

虽然大部分人都将Fiber的结构称为Fiber树,但是实际上Fiber的数据结构已经从树变成了链表的形式,此处引用某大佬的一张图来直观展示:

badf97e8a764180ee0645b8948627237.png

 

(未完待更新)

 

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

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

相关文章

JSP与Servlet的区别

JSP与Servlet的区别

一、技术难点 本质与结构&#xff1a; JSP&#xff08;Java Server Pages&#xff09;在本质上可以被视为一种特殊的Servlet。但两者的创建方式和结构存在显著差异。Servlet完全由Java程序代码构成&#xff0c;擅长于流程控制和事务处理&#xff1b;而JSP则是由JSP容器执行页面…
阅读更多...
python身份证ocr接口功能免费体验、身份证实名认证接口

python身份证ocr接口功能免费体验、身份证实名认证接口

翔云人工智能API开放平台提供身份证实名认证接口、身份证识别接口&#xff0c;两者的相结合可以实现身份证的快速、精准核验&#xff0c;当用户在进行身份证实名认证操作时&#xff0c;仅需上传身份证照片&#xff0c;证件识别接口即可快速、精准的对证件上的文字信息进行快速提…
阅读更多...
腾讯云centos上安装docker

腾讯云centos上安装docker

下面的操作是在root用户下操作的,如果非root用户在命令行前加上sudo 1. 系统及内核查看 操作系统&#xff1a;64位的CentOS 7或更新版本。内核版本&#xff1a;最低要求是3.10&#xff0c;推荐使用3.10或更高版本。 #查看内核版本 (base) [klfwjfweaVM-0-6-centos ~]$ uname…
阅读更多...
rk3568定时器

rk3568定时器

前言 本文记录的是用rk3568开发板做定时器实验 1 定时器理论知识 1.1系统节拍 在linux的kernel路径中，输入： make ARCH=arm64 menuconfig // 在内核路径下执行打开配置界面 选中“Timer frequency”，打开以后如图所示： 从图 14.1.1.1 可以看出，可选的系统节拍率为 100…
阅读更多...
对i += i -i和i = i - 1的理解

对i += i -i和i = i - 1的理解

i i & -i迭代的结果是每次加i的最低次&#xff0c;直到加到与i最近的2的次幂。 比如&#xff0c;初始i是65&#xff0c;迭代的i的值如下&#xff1a;66&#xff0c; 68&#xff0c; 72&#xff0c; 80&#xff0c; 96&#xff0c;128&#xff0c; 256&#xff0c; 512 ..…
阅读更多...
派派派森03

派派派森03

1.JSON数据 Python数据和Json数据的相互转化 # 导入json模块 import json#准备符合json格式要求的python数据 data [{"name": "老王", "age": 16}, {"name": "张三", "age": 20}]# 通过json.dump(data)方法把pyt…
阅读更多...
配置无密码 sudo

配置无密码 sudo

配置无密码 sudo 需要谨慎操作&#xff0c;因为这会给你的系统安全带来一定的风险。在决定这么做之前&#xff0c;请确保你了解潜在的安全后果。以下是具体操作步骤&#xff1a; 步骤1: 使用 visudo 编辑 sudoers 文件 visudo 是一个命令行工具&#xff0c;它用于安全地编辑 …
阅读更多...
黑龙江等保测评有哪些内容？

黑龙江等保测评有哪些内容？

与等保1.0相比&#xff0c;新的等保2.0版本有了很大的变化&#xff0c;评估的内容、评估的标准也有了很大的差异。那么新版的《等保2.0》实施后&#xff0c;我们要测试什么&#xff1f; 等保测评首先是有十个大项&#xff0c;安全物理环境&#xff0c;安全区域边界&#xff0c;…
阅读更多...
（echarts）图上数值显示单位

（echarts）图上数值显示单位

&#xff08;echarts&#xff09;图上数值显示单位 series: [{name: 比例,type: bar,...label: {show: true,position: top,formatter: (params) > params.value % //图上数值显示格式},tooltip: { //鼠标移入图上数值显示格式valueFormatter: function(value) {return val…
阅读更多...
mysql解决深度分页的问题

mysql解决深度分页的问题

limit深分页为什么会变慢&#xff1f; 例如&#xff1a;一条sql&#xff1a; select id,name,age, from user where age >10 limit (10000,10); 首先这条sql肯定是比较慢的&#xff0c;因为它经过了很多次的回表。 sql执行流程&#xff1a; 1&#xff1a;先通过普通索引…
阅读更多...
Ant-Design-Vue 动态表头并填充数据

Ant-Design-Vue 动态表头并填充数据

在现代前端开发中&#xff0c;动态表格是一个常见需求&#xff0c;尤其是在处理大量数据和需要灵活展示时。Ant-Design-Vue 作为一个基于 Vue 的 UI 组件库&#xff0c;提供了强大的表格组件 a-table&#xff0c;使得实现动态表头和数据填充变得简单高效。本文将详细介绍如何使…
阅读更多...
数据分析------统计学知识点（三）

数据分析------统计学知识点（三）

相关性分析 1.趋势分析与散点图 散点图可帮助我们发现和理解变量间的关系&#xff0c;可直观观察是否有相关性。 &#xff08;1&#xff09;散点图定义及组成要素 散点图是一种以点的形式在直角坐标系上表示两个数值变量间关系的图表 横坐标&#xff08;x轴&#xff09;&a…
阅读更多...
SQL小白10分钟快速入门

SQL小白10分钟快速入门

SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系型数据库的标准化编程语言。以下是SQL的入门基础教程&#xff0c;涵盖了一些基本概念和常用操作。 1. 数据库和表 数据库&#xff08;Database&#xff09;&#xff1a;一个存储数据的容器。表&#…
阅读更多...
【JavaScript脚本宇宙】领先的静态网站构建工具：全面对比

【JavaScript脚本宇宙】领先的静态网站构建工具：全面对比

静态站点生成器大解析&#xff1a;找出哪一款最适合你 前言 本文将探讨六种不同的静态站点生成器和React框架&#xff0c;包括Gatsby&#xff0c;Next.js&#xff0c;Jekyll&#xff0c;Hugo&#xff0c;Hexo和Eleventy。这些工具各有特色&#xff0c;提供了丰富的功能和使用…
阅读更多...
PEI转染试剂如何保存呢？

PEI转染试剂如何保存呢？

转染试剂是瞬时转染生产病毒载体的主要原材料之一。作为上游病毒生产的重要原物料之一&#xff0c;转染试剂对病毒载体的产能具有重要影响。而转染试剂的转染效率、稳定性都直接影响着大规模病毒载体生产的产能与周期。因此&#xff0c;了解PEI转染试剂正确的保存方法对于保障实…
阅读更多...
实现k8s网络互通

实现k8s网络互通

前言 不管是docker还是k8s都会在物理机组件虚拟局域网&#xff0c;只不过是它们实现的目标不同。 docker&#xff1a;针对同一个物理机&#xff08;宿主机&#xff09; k8s&#xff1a;针对的是多台物理机&#xff08;宿主机&#xff09; Docker 虚拟局域网 K8S虚拟局域网 …
阅读更多...
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200

net::ERR_INCOMPLETE_CHUNKED_ENCODING 200

首先了解 proxy_buffers 是Nginx中用于配置代理服务器响应的缓冲区大小的指令&#xff0c;它对于优化Nginx服务器性能以及提升用户体验至关重要。通过合理设置proxy_buffers及其相关参数&#xff0c;可以有效地管理服务器资源&#xff0c;提高处理请求的效率&#xff0c;减少数…
阅读更多...
借鉴与创新 台湾Apex齿轮减速机PII系列

借鉴与创新 台湾Apex齿轮减速机PII系列

台湾Apex Dynamics公司以其卓越的减速机技术&#xff0c;长期在全球机械传动领域占据着重要的地位。其中&#xff0c;齿轮减速机PII系列作为齿轮箱Apex基线的新成员&#xff0c;更是凭借其独特的性能和设计受到了广泛的应用。 APEX齿轮减速机PII系列在重量&#xff0c;尺寸&…
阅读更多...
CANoe仿真工程Switch控件关联dbc信号出现的问题及解决思路

CANoe仿真工程Switch控件关联dbc信号出现的问题及解决思路

小白学习CANoe仿真&#xff0c;参考CANoe-第2个仿真工程-XVehicle—1总线数据库设计&#xff08;思路&#xff09;_canoe vehicle-CSDN博客 CANoe-第2个仿真工程-XVehicle1总线数据库设计&#xff08;操作&#xff09;_canoe factor 参数什么意思-CSDN博客CANoe-第2个仿真工程…
阅读更多...
【计算机网络】对应用层HTTP协议的重点知识的总结

【计算机网络】对应用层HTTP协议的重点知识的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…
阅读更多...
最新文章

Copyright @ 2022~2023