撩課-Web大前端天天5道面試題-Day34

1.React 中 keys 的做用是什麼？

Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。

render () {
  return (
    <ul>
      {this.state.todoItems.map(({item, key}) => {
        return <li key={key}>{item}</li>
      })}
    </ul>
  )
}

在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。
在 React Diff 算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，
從而減小沒必要要的元素重渲染。
此外，React 還須要藉助 Key 值來判斷元素與本地狀態的關聯關係，
所以咱們毫不可忽視轉換函數中 Key 的重要性。

複製代碼

2.調用 setState 以後發生了什麼？

在代碼中調用 setState 函數以後，
React 會將傳入的參數對象與組件當前的狀態合併，
而後觸發所謂的調和過程（Reconciliation）。
通過調和過程，
React 會以相對高效的方式根據新的狀態構建 React 元素樹而且着手從新渲染整個 UI 界面。
在 React 獲得元素樹以後，
React 會自動計算出新的樹與老樹的節點差別，
而後根據差別對界面進行最小化重渲染。
在差別計算算法中，
React 可以相對精確地知道哪些位置發生了改變以及應該如何改變，
這就保證了按需更新，而不是所有從新渲染。

複製代碼

3.react 生命週期函數?

初始化階段：

getDefaultProps:獲取實例的默認屬性
getInitialState:獲取每一個實例的初始化狀態
componentWillMount：組件即將被裝載、渲染到頁面上
render:組件在這裏生成虛擬的 DOM 節點
componentDidMount:組件真正在被裝載以後

運行中狀態：

componentWillReceiveProps:組件將要接收到屬性的時候調用
shouldComponentUpdate:
組件接受到新屬性或者新狀態的時候
（能夠返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）
componentWillUpdate:組件即將更新不能修改屬性和狀態
render:組件從新描繪
componentDidUpdate:組件已經更新

銷燬階段：

componentWillUnmount:組件即將銷燬

複製代碼

4.shouldComponentUpdate 是作什麼的，（react 性能優化是哪一個周期函數？）

shouldComponentUpdate 這個方法用來判斷是否須要調用 render 方法從新描繪 dom。
由於 dom 的描繪很是消耗性能，
若是咱們能在 shouldComponentUpdate 方法中可以寫出更優化的 dom diff 算法，能夠極大的提升性能。

複製代碼

5.說說react diff 原理?

把樹形結構按照層級分解，只比較同級元素。
給列表結構的每一個單元添加惟一的 key 屬性，方便比較。
React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）
合併操做，調用 component 的 setState 方法的時候, 
React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.
選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能。

複製代碼