专业编程基础技术教程

网站首页 > 基础教程 正文

B站几道前端面试题总结

ccvgpt 2024-08-15 20:27:35 基础教程 10 ℃

React 、 Vue 和 Angular 已形成了前端界三足鼎立之势。尤其是 React 与 Vue， React 出色的生态与 Vue 完善的中文文档在国内，已经是大部分公司的前端首选技术栈。了解 React 与 Vue 的基础知识考点也是十分之有必要了。下面小编就梳理了下最近网上的几道面试题，我们一起来看看吧。

React 与 Vue 的基础知识考点

React生命周期

B站几道前端面试题总结

React 的生命周期可以大致分为3种类型

  • 创建
  • componentWillMount —— 组件挂载前触发；
  • render —— 创建一棵由 React 元素组成的树；
  • componentDidMount —— 组件挂载后触发，此时页面已经存在DOM，建议在此处发起请求等操作，完成数据初始化；
  • 更新
  • componentWillReceiveProps —— 组件将要接受到上级的Props，此处可以通过props修改 state 的值；
  • shouldComponentUpdate —— React优化的重要API，决定该组件是否应该更新，当该组件继承 PureComponent 时，shouldComponentUpdate 会对 props 与 state 做一个浅比较，来决定是否更新；
  • componentWillUpate —— 组件即将出发更新
  • render —— 创建一棵由 React 元素组成的树；
  • componentDidUpdate —— 组件更新完毕
  • 卸载
  • componentWillUnmount —— 组件即将被销毁，在此处可以清理定时器、取消RxJS的订阅行为等，防止内存溢出。

React V16后，因为引入了 Fiber 机制，之前的部分API可能会被反复调用，所以React对生命周期的API进行了部分调整。

  • 创建
  • componentWillMount static getDerivedFromProps(nextProps, state) —— 新的API是一个静态方法，返回一个对象来更新state，如果返回null则不更新任何内容
  • render
  • componentDidMount
  • 更新
  • componentWillReceiveProps static getDerivedFromProps
  • shouldComponentUpdate
  • componentWillUpate
  • render
  • getSnapshotBeforeUpdate —— 在最近一次渲染输出（提交到 DOM 节点）之前调用，它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
  • componentDidUpdate
  • 卸载
  • componentWillUnmount

Vue生命周期

Vue的生命周期也分成3个阶段进行对比，vue的生命周期基本通过命名就可以了解大概的意思了，我着重说一下每个阶段 Vue 都完成了什么工作。

  • 创建
  • beforeCreate —— 混沌初开，完成实例初始化
  • created —— 实例创建完毕，完成 data 属性的初始化，能够进行访问，但未挂载至DOM
  • beforeMount —— 编译template，但是并未绑定data至视图
  • mounted —— 完成data绑定至视图，并完成挂载DOM操作
  • 更新
  • beforeUpdate —— 在DOM更新之前，可以访问现有DOM
  • updated —— DOM更新完毕
  • 卸载
  • beforeDestory —— 钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用，清理定时器等防止内存溢出的操作在此完成，
  • destroyed —— 钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

组件通信——父子组件

React

class Parent extends Component {
 state = { a: 6 }
 
 changeA = () => this.setState({ a: this.state.a + 1 })
 render() {
 return (
 <div>
 <Child 
 // 完成 父 => 子 通信，直接通过设置 props 传递
 a={this.state.a} 
 // 子 => 父 通信，通过传入绑定 this 的函数完成
 changeA={this.changeA}
 />
 <div>
 )
 }
}


class Child extends Component {
 render() {
 return (
 <div>
 {this.props.a}
 <button 
 // 触发父组件的方法，改变a的值，完成 子 => 父 的通信
 onClick={this.props.changeA}
 > +1 <button>
 <div>
 )
 }
}

Vue

<template>
 <div>
 <Child 
 <!-- 完成 父 => 子 的通信 -->
 :a="a"
 <!-- 自定义事件 addOne 触发时, 执行methods中的 addOne 方法 -->
 <!-- 完成 子 => 父 的通信 -->
 @addOne="addOne"
 ></Child>
 </div>
</template>
<script>
 import Child from 'xxx';
 export default {
 name: 'Parent',
 data() {
 return { a: 5 }
 },
 methods: {
 addOne(value) {
 this.data = value
 }
 },
 components: { Child }
 }
</script>


<template>
 <div>
 {{a}}
 <button @click={changeA}>+1</button>
 </div>
</template>
<script>
 export default {
 name: 'Child',
 props: { a: Number },
 methods: {
 changeA() {
 // 出发 自定义事件 addOne, 并将第二个常数作为参数传递
 this.$emit('addOne', this.a + 1)
 }
 }
 }
</script>

React 的一句话作答

setState 执行后为什么state无法正确获取设置之后的值

setState之后, React并没有立刻更改 state 的值, 因为每次改变state都去计算生成新的VDom树并更新Dom是一件代价高昂的事情, React的做法是将setState设计成为一个异步行为, 多次setState会合并成为一次, 在最后去计算生成Dom, 优化性能。

 this.setState({
 a: 5
 }, () => {
 // setState 提供的第二个参数是一个回调函数
 // 这里能够正确获取 state 里面的值
 })

为什么建议使用 Stateless Function

  • 代码更少, 逻辑更清晰
  • 更加符合 React 数据流从顶部开始的设计初衷
  • 不用使用 bind 方法

React如何使用 Virtual Dom 及其优势

在JS中操作Dom的开销由于会引发浏览器的重排重绘机制, 性能消耗十分显著, 然后在JS中操作对象的效率很高。React团队通过Diff算法, 对比新旧两个 VDom 的内容, 找出不同, 一次性更新Dom, 减少开销。React团队通过直接对比相同层的内容等算法的优化, 将算法复杂度降低到O(n)。

Vue 的一句话作答

v-if 与 v-show 的区别

v-if会将Dom直接从当前Dom树移除, v-show则是相当于设置了 display: none, 但是Dom依旧存在于Dom树中。两种情况各有利弊，类似缓存，视情况不同选择不同。

为什么 data 使用的是function 返回一个对象

data 如果是一个对象的话，当某组件有多个实例时，修改某一实例中 data 属性，因为 data 是引用类型，会导致其他实例均受到影响。

computed 与 methods 的区别

computed 方法会有缓存值, methods 不会存在缓存值。

vue 如何实现响应式的

vue的响应式, 可以分为依赖收集与响应两部分, 简单来说依赖收集部分告诉当前存在哪一些地方依赖了这个属性, 响应部分通过 Object.defineProperty() 方法, 获取 set 与 get 钩子函数, 通过钩子函数中进行操作,实现响应式。

小结

以上主要选择了关于react和vue的几道基础面试题进行了讲解，如有偏差请指出。小编认为框架本身只是工具，唯有掌握核心技术才是关键。

Tags：

猜你喜欢

最近发表
标签列表