react前端面试题整理

最新推荐文章于 2025-02-14 17:31:20 发布

蜡笔小开心

最新推荐文章于 2025-02-14 17:31:20 发布

阅读量236

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/wzr514420887/article/details/128150357

版权

1. 说说你对react的理解？有哪些特性？

React是用于构建用户界面的javaScript库，用于架设自己的网站，react不是一个MVC框架，仅仅是视图（V）层的库

2. 说说Real diff算法是怎么运作的？

diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom。

3. 说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

挂在阶段、更新阶段、卸载阶段

挂载阶段：constructor在react组件挂载之前会调用他的构造函数

ComponentWillMount：在调用render方法之前调用

ComponentDidMount：在组件挂载后立即调用

更新阶段：componentWillReceiveProps：在接受父组件改变后props需要渲染时

Render：是class组件中唯一必须实现的方法

卸载阶段：componentWillUnmount:在此处完成组件的卸载和数据的销毁

4. 说说你对React中虚拟dom的理解？

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能

虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和

5. 说说你对react hook的理解？

React推荐使用函数组件编程，函数组件本身和class组件相比较，无法定义state数据，没有生命周期函数，无法作比较复杂的业务逻辑数据，无法维护自己的状态，要使函数组件拥有class组件的特性的话，需要使用hook

6. React组件之间如何通信？

组件通讯分为三种：父子传值，兄弟传值，跨组件层级

父传子主要是通过在组件标签中添加需要传入的属性，在子组件通过props接收参数

兄弟传值react中兄弟传递都会将状态提升，把数据共享给最近的父组件，然后再从父级拿取参数

7. 说说你对受控组件和非受控组件的理解？应用场景？

受控组件就是受我们控制的组件，组件的状态全程响应外部的数据

非受控组件就是不受我们控制的组件，一般是在初始化的时候接收外部数据，然后在内部储存自身的状态

8. 说说Connect组件的原理是什么？

Connect是高阶组件

Connect有两个参数：mapStateToProps、mapDispatchToProps

1把redux中state数据和action方法直接映射到组件props属性中

2组件中可以通过props使用redux中的数据，调用方法直接调用redux中的action操作

9. 说说react 中jsx语法糖的本质？

Jsx是javaScript的一种语法扩展，jsx就是用来声明react中的元素，react使用jsx来描述用户界面，jsx语法糖允许前端开发者使用类html标签语法来创建虚拟dom

10. 说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

使用中间件支持异步操作、错误处理、日志监控

中间件就是放在dispatch过程，在分发action进行拦截处理，当axtion发出之后reducer立即计算出state，整个过程都是同步操作，那么如果需要异步操作，或者支持错误处理，都可以用上中间件，本质上就是一个函数.对store。Dispatch方法进行了改造，在发出action和执行reducer这两步执念添加了其他功能

常用：redux-thunk：异步操作、redux-logger：日志记录

11. 说说AMD、CMD、commonJS模块化规范的区别？

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。

AMD规范则是非同步加载模块，允许指定回调函数。

对于依赖的模块AMD是提前执行，CMD是延迟执行。

AMD推崇依赖前置，CMD推崇依赖就近

AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一

12. 说说package.json中版本号的规则？

版本的格式

major.minor.patch

主版本号.次版本号.修补版本号

patch：修复bug，兼容老版本

minor：新增功能，兼容老版本

major：新的架构调整，不兼容老版本

13. 说说React jsx转换成真实DOM的过程？

React组件通过便携jsx映射到屏幕上，jsx通过vabel转化成react.createElement，被调用时会传入type标签属性props即很多个子元素childen，生成一个虚拟dom对象，虚拟dom对象通过renderDom.render进行渲染成真实dom

14. 说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

Redux最主要的是用作应用状态的管理，Redux用一个单独的常亮状态state对象，这个对象不能直接被改变。

15. React render方法的原理，在什么时候会触发？

用来渲染页面的生命周期函数，页面数据创建或者更新的时候触发渲染页面

每次setstate都会触发render方法

16. React性能优化的手段有哪些？

使用useMemo对子组件进行缓存，只有父组件更新跟子组件相关联的数据的时候子组件才会重新渲染

UseCallback对传递的方法进行缓存，监听数据更新后才会重新调用方法，从而提高组件的渲染性能

17. 如何通过原生js实现一个节流函数和防抖函数？

Function debounce（fun）{

    Let time = null

    Return function（）{

        If（time ）{

            ClearTimeout（time）

            Time=setTimeout（function(){fun()},1000）

        }

    }

}

18. 说说你对koa中洋葱模型的理解？

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型

Koa的洋葱模型是以next()函数为分割点，先由外到内执行Request的逻辑，然后再由内到外执行Response的逻辑，这里的request的逻辑，我们可以理解为是next之前的内容，response的逻辑是next函数之后的内容，也可以说每一个中间件都有两次处理时机。洋葱模型的核心原理主要是借助compose方法