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 的效能。