【React常见面试题】

简介: 【React常见面试题】

对react的理解?有哪些特性?

React是一个前端js框架

React高效灵活

声明式设计,使用简单

组件式开发,提高代码的复用率

单向的数据绑定比双向的数据绑定更加安全


Real diff算法是怎么运作的?

1)Diff算法是虚拟DOM的一个必然结果,它是通过新旧DOM的对比,

将在不更新页面的情况下,将需要内容局部更新

2)Diff算法遵循深度优先,同层比较的原则

3)可以使用key值,可以更加准确的找到DOM节点

react中diff算法主要遵循三个层级的策略:

tree层级

conponent 层级

element 层级

tree层不会做任何修改,如果有不一样,直接删除创建

component层从父级往子集查找,如果发现不一致,直接删除创建

element层有key值做比较,如果发现key值可以复用的话,就会将位置进行移动,如果没有,则执行删除创建


React生命周期有哪些不同的阶段?每个阶段对应的方法?

挂载卸载过程

constructor,完成了React数据的初始化;

componentWillMount,组件初始化数据后,未渲染DOM前;

componentDidMount,组件第一次渲染完成,dom节点已经生成;

componentWillUnmount,组件的卸载和数据的销毁。

更新过程

componentWillReceiveProps (nextProps),父组件改变后的props需要重新渲染组件时;

shouldComponentUpdate(nextProps,nextState),主要用于性能优化(部分更新),

因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候不需要所有子组件都跟着重新渲染,

然后return false就可以阻止组件的更新;

componentWillUpdate (nextProps,nextState),shouldComponentUpdate返回true后,

组件进入重新渲染的流程;

componentDidUpdate(prevProps,prevState),组件更新完毕后触发;

render(),渲染时触发


对React中虚拟dom的理解?

1)虚拟DOM本质上是一个Object类型的对象

2)虚拟DOM比较轻,真实DOM比较重,虚拟DOM是React内部使用,虚拟DOM不需要真实DOM上那么多的属性

3)虚拟DOM最终回被React渲染到页面上


对react hook的理解?

1)hook是React新增的一个特性

2)Hook主要解决了函数组件没有生命周期,没有状态,一些自身逻辑的问题,还有提高的代码的复用率

3)Hook的一些方法:useState(),useRef(),useCallBack(),useReduer(),useEffect()


React组件之间如何通信?

React组件之间如何通信

1)父组件向子组件传递:

父组件在调用子组件的时候,在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

2)子组件向父组件传递:

父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值

3)兄弟组件之间的通信:

父组件作为中间层来实现数据的互通,通过使用父组件传递

4)父组件向后代组件传递:

使用context提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据

通过使用React.createContext创建一个context;

context创建成功后,其下存在Provider组件用于创建数据源,Consumer组件用于接收数据

Provider组件通过value属性用于给后代组件传递数据

如果想要获取Provider传递的数据,可以通过Consumer组件或者或者使用contextType属性接收

5)非关系组件传递:

将数据进行一个全局资源管理,从而实现通信


Connect组件的原理是什么?

connect 的第一个参数是 mapStateToProps

这个函数允许我们将 store 中的数据作为 props 绑定到组件上

connect 的第二个参数是 mapDispatchToProps

由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上

Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context


对redux中间件的理解?常用的中间件有哪些?

1)中间件(Middleware)在计算机中,是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的

2)redux-thunk:用于异步操作

3)redux-logger:用于日志记录

4)redux中间件就是辅助redux不能完成的功能

5)applayMiddleWare()

6)将它包裹在要使用的插件外部


React jsx转换成真实DOM的过程?

使用React.createElement或JSX编写React组件,实际上所有的 JSX 代码最后都会转换成React.createElement(…) ,Babel帮助我们完成了这个转换的过程。

createElement函数对key和ref等特殊的props进行处理,并获取defaultProps对默认props进行赋值,并且对传入的孩子节点进行处理,最终构造成一个虚拟DOM对象

ReactDOM.render将生成好的虚拟DOM渲染到指定容器上,其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化,最终转换为真实DOM


对@reduxjs/toolkit的理解

reduxjs/toolkit:

Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式,使用 Redux Toolkit 都可以优化你的代码,使其更可维护

react-redux:

react官方推出的redux绑定库,react-redux将所有组件分为两大类:UI组件和容器组件,其中所有容器组件包裹着UI组件,构成父子关系。容器组件负责和redux交互,里面使用redux API函数,UI组件负责页面渲染,不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法


React render方法的原理,在什么时候会触发?

原理:

在类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件

render函数中的jsx语句会被编译成我们熟悉的js代码,在render过程中,react将新调用的render函

数返回的树与旧版本的树进行比较,这一步是决定如何更新 DOM 的必要步骤,然后进行 diff 比

较,更新dom树

触发时机:

类组件调用 setState 修改状态

函数组件通过useState hook修改状态

一旦执行了setState就会执行render方法,useState 会判断当前值有无发生改变确定是否执行

render方法,一旦父组件发生渲染,子组件也会渲染


React性能优化的手段有哪些?

1)避免使用内联函数

2)使用react fragement 避免额外标记

3)immutable,减少渲染的次数,为了避免重复渲染,会在shouldComponentUpdate()中做对

比,当返回true,执行render方法。immutable通过is方法完成对比

4)懒加载组件

5)事件绑定方式(在constructor中使用bind绑定性能更高)

6)服务端渲染

7)组件拆分,合理使用hooks


对koa中洋葱模型的理解?

Koa是一个精简的node框架,被认为是第二代Node框架,其最大的特点就是独特的中间件流程控制,是一个典型的洋葱模型,它的核心工作包括下面两个方面:

将node原生的req和res封装成为一个context对象。

基于async/await的中间件洋葱模型机制

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


借助webpack来优化前端性能?

JS代码压缩

CSS代码压缩

Html文件代码压缩

文件大小压缩

图片压缩

Tree Shaking

代码分离

内联 chunk


借助webpack来优化前端性能?

WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输

较少的控制开销:数据包头部协议较小,不同于http每次请求需要携带完整的头部

更强的实时性:相对于HTTP请求需要等待客户端发起请求服务端才能响应,延迟明显更少

保持创连接状态:创建通信后,可省略状态信息,不同于HTTP每次请求需要携带身份验证

更好的二进制支持:定义了二进制帧,更好处理二进制内容

支持扩展:用户可以扩展websocket协议、实现部分自定义的子协议

更好的压缩效果:Websocket在适当的扩展支持下,可以沿用之前内容的上下文,在传递类似的数据时,可以显著地提高压缩率


相关文章
|
29天前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
57 0
|
29天前
|
前端开发 JavaScript
【第41期】一文入围React面试
【第41期】一文入围React面试
40 0
|
29天前
|
缓存 前端开发 JavaScript
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)( React)
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)( React)
|
29天前
|
存储 缓存 前端开发
【React】Hooks面试题集锦
本文集合一些React的Hooks面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
84 1
|
29天前
|
缓存 前端开发 JavaScript
React 面试题2
React 面试题2
|
29天前
|
缓存 前端开发 JavaScript
React 面试题
React 面试题
131 0
|
29天前
|
JavaScript 前端开发
【金典面试题】Vue与React实现Tree
【金典面试题】Vue与React实现Tree
43 0
|
8月前
|
JavaScript 前端开发
React-组件state面试题
React-组件state面试题
38 0
|
10月前
|
XML JavaScript 前端开发
react面试题大全三
react面试题大全三
|
8天前
|
存储 算法 Java
JAVA后端开发面试题库
JAVA后端开发面试题库
16 1

热门文章

最新文章