【面試總結】記一次失敗的 bilibili 面試總結(3)

時間 2019-11-06

原文原文鏈接

傳送門

面試總結(1)：HTML佈局、CSS選擇器及JS基礎綜合能力知識點
算法基礎：數組flat、去重及排序
React Vue 理解及基礎知識
跨域問題解決方案
http協議狀態碼
緩存及更新問題
webview與原生應用交互
服務器端知識

React 、 Vue 和 Angular 已造成了前端界三足鼎立之勢。尤爲是 React 與 Vue， React 出色的生態與 Vue 完善的中文文檔在國內，已是大部分公司的前端首選技術棧。瞭解 React 與 Vue 的基礎知識考點也是十分之有必要了。下面經過對比的形式整理一下 React 與 Vue 的基礎考點，最後附上本身的認知。javascript

ps：近期工做內容接觸 React 可能比較多，Vue 方面可能言辭欠妥，一旦發現，立馬糾正。html

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進行了部分調整。vue

建立
- ~~componentWillMount~~ static getDerivedStateFromProps(nextProps, state) —— 新的API是一個靜態方法，返回一個對象來更新state，若是返回null則不更新任何內容, 感謝@我能夠指正
- render
- componentDidMount
更新
- ~~componentWillReceiveProps~~ static getDerivedStateFromProps
- shouldComponentUpdate
- ~~componentWillUpate~~
- render
- getSnapshotBeforeUpdate —— 在最近一次渲染輸出（提交到 DOM 節點）以前調用，它使得組件能在發生更改以前從 DOM 中捕獲一些信息（例如，滾動位置）。今生命週期的任何返回值將做爲參數傳遞給 componentDidUpdate()。
- componentDidUpdate
卸載
- componentWillUnmount

vue

Vue的生命週期先附上官方文檔。java

Vue的生命週期也分紅3個階段進行對比，vue的生命週期基本經過命名就能夠了解大概的意思了，我着重說一下每一個階段 Vue 都完成了什麼工做。web

建立
- 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)。算法