【面试总结】记一次失败的 bilibili 面试总结(3)

传送门

• 面试总结(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 属性的初始化，可以进行访问，但未挂载至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 钩子函数, 经过钩子函数中进行操做,实现响应式。

总结

自己框架就是工具，框架🐂🍺不表明项目🐂🍺嗷。

ps: 大佬也能够赐教一些常考考点，作后续补充