react

jiojio冲冲冲

已于 2024-06-06 14:54:46 修改

阅读量1k

点赞数 24

分类专栏：面试题文章标签： react.js 面试前端

于 2024-05-27 22:56:36 首次发布

本文链接：https://blog.csdn.net/weixin_42268006/article/details/139249706

版权

1.hooks和高阶组件（HOC）有啥区别？

高阶组件（HOC）是用于复用组件逻辑的一种高级技巧。高阶组件是参数为组件，返回值为新组件的函数。HOC的优点∶ 逻辑复用、不影响被包裹组件的内部逻辑。缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖。
react-hooks是react新增的钩子API，通过钩子让函数组件也有了生命周期，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷，hook解决了高阶组建的prop覆盖的问题，同时使用的方式解决了render props的嵌套地狱的问题，能在return之外使用数据的问题。hook只能在组件顶层使用，不可在分支语句中使用。
render prop 是一个用于告知组件需要渲染什么内容的函数 prop，render props优点：数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。缺点：无法在 return 语句外访问数据、嵌套写法不够优雅
高阶组件和render props 是对类组件的扩展，hook是作用在函数组件

2.常用hooks有哪些和不常用的有哪些？

1.useState() 状态钩子

2.useContext() 共享状态钩子用于在函数组件中使用上下文
该钩子的作用是，在组件之间共享状态。可以解决react逐层通过Porps传递数据，

useReducer()
和useState的作用类似，用来管理相对复杂的状态数据
使用useReducer() 代替了Redux的功能，但useReducer 无法提供中间件等功能。

4.useEffect() 副作用钩子
接收两个参数，第一个是进行的异步操作，第二个是数组，用来给出Effect的依赖项。第二个参数（数组）发生变化， ==useEffect()==就会执行。第二项不填时， useEffect（）会在每次组件渲染时执行。
用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等
需求：在组件渲染完毕之后，立刻从服务端获取平道列表数据并显示到页面中

5.useCallback用于在函数组件中缓存回调函数
它接受一个回调函数和一个依赖数组，并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时，缓存的回调函数将被更新。

6.useMemo用于在函数组件中缓存计算结果
它接受一个计算函数和一个依赖数组，并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时，计算函数将被重新计算。

7.useRef用于在函数组件中引用DOM元素或其他值。
它返回一个包含可变引用的对象。当在函数组件中传递该对象时，它将保留其引用，即使组件重新渲染。

总结：
1.useState：用于在函数组件中管理状态。可以用于跟踪和更新组件的内部状态，例如表单输入、开关状态、计数器等。
2.useEffect：用于处理副作用操作，例如数据获取、订阅事件、DOM操作等。可以在组件渲染后执行一些操作，也可以在组件卸载前进行清理操作。
3.useContext：用于在组件之间共享数据。可以创建一个全局的上下文，并在组件树中的多个组件中访问和更新该上下文。
4.useReducer：用于管理复杂的状态逻辑。可以用于替代useState，特别适用于具有复杂状态转换的组件，例如有限状态机、游戏状态等。
5.useCallback：用于性能优化。可以缓存函数实例，以便在依赖项不变的情况下避免不必要的函数重新创建，提高组件的性能。
6.useMemo：用于性能优化。可以缓存计算结果，以便在依赖项不变的情况下避免重复计算，提高组件的性能。
7.useRef：用于在函数组件中保存可变值的引用。可以用于保存DOM元素的引用、保存上一次渲染的

2.1不常用的hooks

useLayoutEffect和useInsertionEffect以及useEffect
useLayoutEffect的函数声明与useEffect相同，但是它会在所有的DOM变更之后同步调用effect。可以使用它来读取DOM布局并同步触发重新渲染。在浏览器执行绘制之前，useLayoutEffect内部的更新计划将被同步刷新

2.useImperativeHandle通过ref暴露子组件中的方法
3.useDeferredValue和useTransition的作用
useDeferredValue 和useTransition这两个钩子可以让我们延迟渲染不紧急的部分，类似于防抖但没有固定的延迟时间，延迟的渲染会在紧急的部分先出现在浏览器屏幕以后才开始，并且可中断，不会阻塞用户输入。渲染比较消耗性能，比如存在实时计算和反馈，我们可以使用这个Hook降低其计算的优先级，使得避免整个应用变得卡顿。较多的场景可能就在于用户反馈输入上。比如百度的输入框，用户在输入的时候，页面会发生变化，但是输入框输入并不卡顿。

3.泛型是什么，有什么作用？

是JDK5 中引入的特性，可以在编译阶段约束操作的数据类型，并进行检查。
泛型只能支持引用数据类型，好处：统一数据类型把运行时期的问题提前到了编译期间，避免了强制类型转换可能出现的异常，因为编译阶段类型就能确定下来

4.事件循环

事件循环分为两种,分别是浏览器事件循环和node.js事件循环，JavaScript是一门单线程语言，指主线程只有一个。事件循环是JS引擎管理事件执行的一个流程，具体由运行环境确定。目前JS的主要运行环境有两个，浏览器和Node.js。事件循环机制告诉了我们JS代码的执行顺序，是指浏览器或Node的一种解决JS单线程运行时不会阻塞的一种机制。
浏览器的事件循环又分为同步任务和异步任务

5.虚拟dom

两者的区别如下:
虚拟 DOM 不会进行重排与重绘操作,而真实 DOM 会频繁重排与重绘
虚拟 DOM 避免大量的无谓计算

真实 DOM 的优势:易用
缺点:
效率低，解析速度慢,内存占用量过高
性能差:频繁操作真实 DOM易于导致重绘与回流。

虚拟 DOM 的优势:
性能方面: 使用 Virtual DOM,能够有效避免真实 DOM 数频繁更新,减少多次引起重绘与回流提高性能
跨平台:React 借助虚拟 DOM,带来了跨平台的能力，一套代码多端运行
缺点:
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

6.setState是异步还是同步？什么时候异步，什么时候同步？

在同步环境中异步，在异步环境中同步。
在同步环境中，setState处于react的上下文中，react会监控动作合并，所以setState()是异步的。
在promise的then()方法中、setTimeOut()、setInterVal()，ajax的回调等异步环境中，setState就是同步

7.js怎么实现继承深拷贝

子对象不仅继承父对象的非引用属性，还能继承父对象的引用属性（Object，Array），当子对象对继承的引用类型属性做修改时，父对象的引用类型不会被修改。

8.webpack作用

Webpack 是实现前端项目的模块化，用于现代 JavaScript 应用程序的静态模块打包工具，被webpack 直接引用的资源打包进 bunde.js的资源，当webpack 处理应用程序时,它会在内部构建一个依赖图,依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle
解决问题：
1️⃣编译代码能力，提高效率，解决浏览器兼容问题
2️⃣模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题
3️⃣模块能力,项目维护性增强,支持不同种类的前端模块类型,统一的模块化方案,所有资源文件的加载都可以通过代码控制

9.loader和pguins区别

区别:
loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决loader 无法实现的其他事

10.项目包使用了js怎么配置成ts项目？

1.首先需要安装typescriptnpm install typescript
2.需要在根目录中添加ts的配置文件tsconfig.json
可以手动添加配置，也可以直接npx tsx --init
3.将项目中的jsx文件改为tsx文件
4.可能会遇到找不到module或者相关类型说明文件
需要在tsconfig.json中配置baseUrl和path，避免找不到路径，
对于图片等文件的引入，需要添加一个images.d.ts的类型说明文件

11.interface和type的区别？

typeof 会返回一个变量的基本类型, instanceof 返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型，type可以判断基础数据类型

12.promise

Promise 有三种状态：
pending 进行中
fulfilled 已成功
rejected 已失败

Promise 方法：
1️⃣ Promise 构造函数用于创建一个新的 Promise 对象。它接受一个函数作为参数，该函数有两个参数 resolve 和 reject，分别表示异步操作成功和失败时的回调函数。
2️⃣ Promise.then() 方法用于注册异步操作成功时的回调函数。它接受一个回调函数作为参数，该回调函数的参数是异步操作成功时返回的数据
3️⃣Promise.catch() 方法用于注册异步操作失败时的回调函数。它接受一个回调函数作为参数，该回调函数的参数是异步操作失败时返回的错误
4️⃣Promise.all() 方法用于同时处理多个 Promise 对象。它接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当所有的 Promise 对象都成功时，新的 Promise 对象才会成功；当任何一个 Promise 对象失败时，新的 Promise 对象就会失败
5️⃣Promise.race() 方法用于处理多个 Promise 对象，它接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当任何一个 Promise 对象成功或失败时，新的 Promise 对象就会成功或失败

使用场景：
处理异步回调
多个异步函数同步处理
异步依赖异步回调
封装统一的入口办法或者错误处理

15.async awite

async用于申明一个function是异步的；
而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。
解决js异步回调问题， async/awite 内部可以try catch可以断点。
promise内部无法进行try catch 只能使用原型上的catch方式统一进行代码捕获，而且promise内部无法进行断点调试。
async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

16.js的基本数据类型

基本类型：
Number
String
Boolean
Undefined
null
symbol

引用类型
Object
Array
Function

17.js闭包

函数内嵌套函数，内部函数被外部函数返回并且保存下来时，就会产生闭包。闭包可以访问外部的变量，但外部的变量不能访问内部的，闭包可以保持对定义时的作用域的引用，使之不能被销毁。
特点：可以重复利用变量，并且这个变量不会被污染全局的一种机制，这个变量是一直保存在内存中，不会被垃圾回收机制和回收。
缺点：闭包多的时候，会消耗内存，导致页面性能的下降，在IE浏览器中会导致内存泄露。
作用：就是保护变量，防止命名冲突，保护作用域
使用场景：防抖，节流，函数嵌套函数避免全局污染。

18.原型链

原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，这个prototype属性就是我们的原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针(proto)指向他的构造函数的原型对象！这样构造函数和实例对象之间就通过( proto )连接在一起形成了一条链子。

19._proto和prototype的区别

proto ：是实例对象指向原型对象的指针，隐式原型，是每个对象都会有的一个属性。
prototype：是构造函数的原型对象，显式原型，只有函数才会有。

20.怎么防止多次点击按钮

方案一：按钮添加二次确认功能（利用ant design 的 Modal组件 ）
方案二：利用 async await
方案三：按钮上锁
方案四：防抖（在一定时间内，动作只会执行一次）
方案五：节流

21. React 中的虚拟 DOM 是什么？它的作用是什么？

在React中，当数据发生变化时，首先会在虚拟DOM上执行DOM更新，而不是直接操作真实DOM。然后，通过比较前后两个虚拟DOM的差异，最小化真实DOM的操作，从而减少页面重绘的次数，提高性能。
虚拟DOM的结构类似于真实DOM，每个虚拟DOM节点都有标签名、属性、子节点等信息。React使用虚拟DOM来跟踪组件的状态变化，保持UI与状态的同步

作用

性能优势
使用虚拟DOM可以减少对真实DOM的操作次数。当数据发生变化时，React首先在虚拟DOM上执行DOM更新，然后通过比较前后两个虚拟DOM的差异，计算出最小化的DOM变更，最后再将变更应用到真实DOM上。这样做的好处是减少了DOM操作的成本，减少了浏览器重绘的次数，从而提高了应用的性能和响应速度。
#2. 开发效率
虚拟DOM使得React开发变得更加高效。通过使用组件化开发模式，我们可以将UI划分为独立、可重用的组件，这样做使得代码的复用性更高，开发变得更加模块化和灵活。同时，React的生态系统也提供了大量的第三方组件和工具，可以进一步加速开发过程。
#3. 跨平台兼容性
虚拟DOM的概念并不限于Web开发，它同样适用于React Native等其他平台。这使得我们可以通过一套代码，实现Web、移动端等不同平台的应用程序开发，提高了跨平台兼容性和开发效率。
#4. 更好的可维护性
使用虚拟DOM可以使代码的结构更加清晰和易于维护。React的组件化开发模式使得每个组件都相对独立，易于理解和测试。此外，通过虚拟DOM的数据流控制，使得应用程序的数据变更变得更加可预测，易于调试和追踪问题。