传送门
- 面试总结(1):HTML布局、CSS选择器及JS基础综合能力知识点
- 算法基础:数组flat、去重及排序
- React Vue 理解及基础知识
- 跨域问题解决方案
- http协议状态码
- 缓存及更新问题
- webview与原生应用交互
- 服务器端知识
React 、 Vue 和 Angular 已形成了前端界三足鼎立之势。尤其是 React 与 Vue, React 出色的生态与 Vue 完善的中文文档在国内,已经是大部分公司的前端首选技术栈。了解 React 与 Vue 的基础知识考点也是十分之有必要了。下面通过对比的形式整理一下 React 与 Vue 的基础考点,最后附上自己的认知。
ps:近期工作内容接触 React 可能比较多,Vue 方面可能言辞欠妥,一旦发现,立马纠正。
React 与 Vue 的基础知识考点
生命周期
React
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 getDerivedStateFromProps(nextProps, state)
—— 新的API是一个静态方法,返回一个对象来更新state,如果返回null则不更新任何内容, 感谢@我可以 指正render
componentDidMount
- 更新
componentWillReceiveProps
static getDerivedStateFromProps
shouldComponentUpdate
componentWillUpate
render
getSnapshotBeforeUpdate
—— 在最近一次渲染输出(提交到 DOM 节点)之前调用,它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。componentDidUpdate
- 卸载
componentWillUnmount
vue
Vue的生命周期先附上官方文档。
Vue的生命周期也分成3个阶段进行对比,vue的生命周期基本通过命名就可以了解大概的意思了,我着重说一下每个阶段 Vue 都完成了什么工作。
- 创建
beforeCreate
—— 混沌初开,完成实例初始化created
—— 实例创建完毕,完成 data 属性的初始化,能够进行访问,但未挂载至DOMbeforeMount
—— 编译template,但是并未绑定data至视图mounted
—— 完成data绑定至视图,并完成挂载DOM操作
- 更新
beforeUpdate
—— 在DOM更新之前,可以访问现有DOMupdated
—— 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 钩子函数, 通过钩子函数中进行操作,实现响应式。
总结
本身框架就是工具,框架🐂🍺不代表项目🐂🍺嗷。
ps: 大佬也可以赐教一些常考考点,做后续补充