前端面试题整理(六)

目录

1.Vue组件通信

2.说说你对vuex的理解?写出其原理的核心代码?

3.说说React生命周期中有哪些坑?如何避免?

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

5.调和阶段setState干了什么? 

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

7.说说redux的实现原理是什么,写出其原理的核心代码? 

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

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

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

11.props和state相同点和不同点?render方法在哪些情况下会执行? 

 12.react新出来两个钩子函数是什么?和删掉的will系列有什么区别?

13.CDN的特点及意义? 

14.什么是闭包,应用场景是什么? 

15.从浏览器地址栏输入url到显示页面的步骤? 

16.介绍一下你对浏览器内核的理解? 

17.清除浮动的几种方式?各自的优缺点? 

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

19.如果需要手动写动画,你认为最小时间间隔是多久,为什么?

20. 说说你对webSocket的理解?
​​​​​​​

1.Vue组件通信

1.父组件传入属性,子组件通过props属性来接收,使用this.$eimt方式来使用,this.$emit向外弹出一个事件,在父组件中进行监听
2.使用$parent,$children进行父子组件通信,仅限于 父子组件使用,不利于维护
3.$ref通过引用的方式获取子节点,常用于父组件调用于子组件的方法或者子组件的属性
4.provide/inject依赖注入,常用于插件或者组件库
5.eventBus事件总线(任意两个组件通信)
6.$attr、$listener适用于多级组件嵌套。
7.vuex状态集中管理器
8.localStorage/sessionStorage持久化存储

2.说说你对vuex的理解?写出其原理的核心代码?

vuex是专门为vue.js应用程序开发的状态管理模式,他实现了集中管理数据的状态,以一种新规则的方式预测数据的变化。
vuex本质是一个对象,vuex对象有两个属性,一个是install方法,一个是store类
install方法的作用是将store这个实例挂载到所有组件上,注意是同一个store实例
store这个类拥有commit,dispatch这些方法,store类将用户传入的state包装成data,作为new Vue的参数,从而实现了state的值的响应式
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{},   //存储数据
    getter:{},  //计算属性
    mutations:{},  //更改store中数据的状态
    actions:{},  //包含异步操作,提交mutations间接更改状态
    module:{},  //模块化
})

3.说说React生命周期中有哪些坑?如何避免?

1.getDerivedStateFromProps 容易编写反模式代码,使受控组件与非受控组件区分模糊。
2.componentWillMount 在 React中已被标记弃用,不推荐使用,主要原因是新的异步渲染架构会导致它被多次调用。 所以网络请求及事件绑定代码应移至 componentDidMount 中。
3.componentWillReceiveProps 同样被标记弃用,被 getDerivedStateFromProps 所取代,主要原因是性能问题。
4.shouldComponentUpdate 通过返回true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。

5.componentWillUpdate同样是由于新的异步渲染机制,而被标记废弃,不推荐使用,原先的逻辑可结合getSnapshotBeforeUpdate 与componentDidUpdate 改造使用。
6.如果在 componentWillUnmount函数中忘记解除事件绑定,取消定时器等清理操作,容易引发 bug。

7.如果没有添加错误边界处理,当渲染发生异常时,用户将会看到一个无法操作的白屏,所以一定要添加。

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

虚拟dom是一种编程概念,虚拟dom是一棵虚拟的JavaScript对象树,它将真实的文档,虚拟成一个个js的结点,并且以树形的结构,保存在内存中。

react的函数组件思想,是在发生数据(setState)更改后,会生成新的虚拟dom树,进行新旧dom树比较不同点

5.调和阶段setState干了什么? 

1.调用setState后,组件会将传递的参数对象与组件当前的状态进行合并,然后触发所谓的调和过程

2.在调和过程中,react会以相对高效的方式根据新的状态构建react元素树,并且着手于渲染整个UI界面

3.在react得到最新的元素树后,会自动计算新树与旧树的结点差异,根据差异进行局部更新

4.在差异计算中,react会精确知道那里需要更新与如何进行更新,这就实现了按需更新,而不是整体更新

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

1.父组件向子组件传递

2.子组件向父组件传递

3.兄弟组件之间的通信

4.父组件向后代组件传递

5.非关系组件通信

React的组件灵活多样,按照不同的方式可以分成很多类型的组件

而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信

组件间通信即指组件通过某种方式来传递信息以达到某个目的

7.说说redux的实现原理是什么,写出其原理的核心代码? 

1.将应用的状态统一放到state中,由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,UI层每一次状态的改变都应通过action去触发,action传入对应的reducer 中,reducer返回一个新的state更新store中存放的state,这样就完成了一次状态的更新
4.subscribe是为store订阅监听函数,这些订阅后的监听函数是在每一次dipatch发起后依次执行
5.可以添加中间件对提交的dispatch进行重写

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

首先connect之所以会成功,是因为Provider组件:

在原应用组件上包裹一层,使原来整个应用成为Provider的子组件
接收Redux的store作为props,通过context对象传递给子孙组件上的connect
那connect做了些什么呢?

它真正连接 Redux 和 React,它包在我们的容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。

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

jsx本质上就是React.createElement的语法糖,不在使用React.createElement的繁琐写法,而是使用更加直观的声明式语法,与HTML结构相同,降低了React的学习成本,提高了开发效率

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

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

  • redux-thunk:用于异步操作
  • redux-logger:用于日志记录
const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
);

11.props和state相同点和不同点?render方法在哪些情况下会执行? 

相同点:

        两者都是 JavaScript 对象

        两者都是用于保存信息

        props 和 state 都能触发渲染更新

区别:

        props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化

        props 在组件内部是不可修改的,但 state 在组件内部可以进行修改

        state 是多变的、可以修改

Render在组件实例化和存在期时都会被执行。实例化在componentWillMount执行完成后就会被执行。

 12.react新出来两个钩子函数是什么?和删掉的will系列有什么区别?

React16的2个新的生命周期:
getDerivedStateFromProps,getSnapshotBeforeUpdate

React16废弃的生命周期有3个will:
componentWillMount

componentWillReceiveProps

componentWillUpdate

废弃的原因: 是在React16的Fiber架构中,调和过程会多次执行will周期,不再是一次执行,失去了原有的意义。此外,多次执行,在周期中如果有setState或dom操作,会触发多次重绘,影响性能,也会导致数据错乱。

13.CDN的特点及意义? 

解析URL地址

CDN 意为内容分发网络,是基于现有网络的智能虚拟网络,分布在世界各地的边缘服务器上。

1.本地缓存加速

2.镜像服务

3.远程加速

4.带宽优化

5.集群抗攻击

14.什么是闭包,应用场景是什么? 

闭包就是能够读取其他函数内部变量的函数,只不过是处于其他函数内部而已。

闭包的作用:

  • 作用:延伸变量的作用范围。
  • 变量不会销毁(核心作用)
  • 变量什么时候不会销毁:变量被引用并且有内存
  • 闭包的缺点:内存泄漏(栈溢出)

应用场景:

  1. 闭包应用-计算打车价格
  2. 闭包应用-3秒钟之后,打印所有li元素的内容
  3. 利用闭包的方式得到当前li 的索引号
  4. 创建私有变量
  5. 延长变量的生命周期

15.从浏览器地址栏输入url到显示页面的步骤? 

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接,与服务器建立tcp三次握手。

5、握手成功后,浏览器向服务器发送http请求,请求数据包。

6、服务器处理收到的请求,将数据返回至浏览器

7、浏览器收到HTTP响应。根据情况选择关闭TCP连接或者保留重用

8、如果得到的资源(静态)可以缓存,进行缓存

8、读取页面内容,浏览器渲染,解析html源码

9、生成Dom树、解析css样式、js交互

10、ajax(Asynchronous Javascript And XML)异步处理 可以在不重新加载整个网页的情况下,对网页的某部分进行更新

16.介绍一下你对浏览器内核的理解? 

内核 主要分为两个部分:渲染引擎(Render Engine)和JS引擎,由于JS引擎越来越独立,所以现在我们所指的浏览器内核只指渲染引擎。

  • 渲染引擎:负责取得网页的内容(html,xml和图像等),整理讯息(例如假如css),以及计算网页的显示方式,然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎:解析和执行JavaScript来实现网页的动态效果。

17.清除浮动的几种方式?各自的优缺点? 

  • 父级div定义伪类:after和zoom  优点:浏览器支持广,缺点:代码量多
  • 父级div定义overflow:hidden   优点:简单,代码量少, 缺点:不能和position配合使用
  • 结尾处加空div标签clear:both  优点:简单,代码少,  缺点:会有很多空div
  • 父级div定义height                   优点:简单,容易掌握   缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。
  • 父级div定义overflow:auto       优点:简单,代码少 ,  缺点:内部宽高超过父级div时,会出现滚动条。

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

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

核心:

  1. 将node原生的req和res封装成为一个context对象。
  2. 基于async/await的中间件洋葱模型机制。

19.如果需要手动写动画,你认为最小时间间隔是多久,为什么?

  多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms

20. 说说你对webSocket的理解?

WebSocket是一种基于TCP的全双工通信协议,在应用层。建立WebSocket连接之后,客户端与服务端交流更方便,客户端只需要向服务端发送一次请求,服务端主动向客户端发送消息,WebSocket应用场景一般有即时聊天室,常用事件有open,message,error,close,常用方法有send,close

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值