前端百問

react diff 算法

1， 相同的level之間進行對比，控制只是比較同一層級的元素，tree diff。 2， 節點與節點之間對比， component diff， 判斷是不是更新，刪除，仍是不須要任何操做（使用shouldComponentUpdate()來判斷） 3， 同一層級的，能夠經過id進行標記，這裏的移動規則其實也很簡單，首先遍歷新集合，找到存在於舊集合中的元素，根據舊集合中的_mountIndex(實際位置)和新集合中元素的在舊集合中出現的lastIndex來進行比較是否進行移動操做，其實就是一個根據key不斷移動舊集合中的元素位置，來達到變成新集合的過程，相似於字符串的編輯距離。

react 高階組件

什麼是react 高階組件

就是一個組件的包裝，能夠理解爲傳入一個組件，返回一個包裝以後的組件。

高階組件能夠作什麼

包裹組件

1， 能夠操做props，作任何想作的事情 2， 經過ref獲取的包裹組件 3， 操做state和props，能夠在高階組件中拿到包裹組件的狀態 4， 包裝傳入的組件

反向繼承

能夠經過反向繼承，也就是高階組件繼承傳入的組件，好比以下：

function HigherOrderComponent(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    };
}
複製代碼

1，能夠操做state 2，修改super.render()返回的json對象

高階組件存在的問題

1， 靜態方法的丟失 2， ref的丟失， 經過react.forwardRef 來作中間代理

高階使用在那些地方

1， 最基本的是複用代碼
2， 權限控制

react context

爲何會有context？

爲了防止層層傳遞整個組件樹的值，不用一層層的去傳遞。

使用過程

1，經過React.createContext('light')
2, 經過Provider提供給組件 3，須要使用context的組件使用static contextType = ThemeContext;定義本身須要使用哪一個context