• react有一個特殊屬性key
• 應用場景
  • 根據數組動態創造，不確定數量，順序的子節點時使用
  • 需要對某一組件的更新操作強制替換成卸載重建操作
• 規則
  • react比較更新前后元素的key值，如果相同則更新，不同則銷毀重建
• 為什么其他組件不需要key
  • 數組外的每個元素始終出現在React.createElement() 參數列表中的固定位置，這就是天然的key
• 在element diff中進行優化，通過添加key，可以進行移動操作

key輔助react調和過程

• 調和：react將Virtual DOM樹轉成真實dom樹最少的操作稱之為調和
• diff算法：diff算法就是調和的具體體現
• diff算法策略：
  • 策略一：web中DOM節點跨層級的移動操作少，可以忽略
  • 策略二：擁有相同類的兩個組件會生成相似的樹型結構
  • 策略三：對于同一層級的一組子節點，可以通過唯一ID區分
• diff算法過程：

  • tree diff

    • 只會對相同層級的DOM節點進行對比
    • 如果有跨節點操作先create后delete（官方推薦不要有跨節點操作）

  • component diff

    • 如果是同一組件，則繼續進行tree diff
    • 如果不是同一組件，則替換掉組件下的所有子節點
    • 可以通過shouldComponentUpdate來判斷組件是否需要diff分析

  • element diff

    • 節點處于同一層級時，diff提供了3種操作
    • 插入，刪除，移動

  • 允許開發者針對同一層級的同組子節點，添加唯一key進行區分。

    • 進行diff差異化對比后，通過key發現新舊集合中的節點為相同節點，無需進行增刪，只需移動。
    • 移動策略：如果通過key判斷出存在相同節點

     if (child._mountIndex < lastIndex) { 進行移動 }
    

測試（存在key,不存在key,狀態更改渲染區別）

• 情況一
  • beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
  • 不存在key

{

    this.state.list.map((item, index) => {

        return <Button
                size='long'
                btnType='primary'
                isRadius={false}
                style={{width:'100%'}}
            >{item}</Button>

    })

}
export default class Button extends React.Component {

    constructor (props) {
        // debugger;
        super (props);
    }

    clickhandle(e){
        this.props.onClick(e.target);
    }

    componentWillMount () {

        console.log('lm at componentWillMount')
    }

    componentWillReceiveProps () {

        console.log('lm at componentWillReceiveProps')

    }

    componentWillUnmount () {

        console.log('lm at componentWillUnmount')

    }
       ...

• 根據我們上文描述的預期情況他們會以默認的數組順序為key
• beforeKey[1,2,3,4]--afterKey[1,2,3,4]順序數量都沒變，那么沒有移動刪除增加操作，每個組件都不銷毀，只會接受新props到componentWillReceiveProps周期
• 此時應該打印出四個

'lm at componentWillReceiveProps'

• 真實情況：

image.png

• 情況二
  • beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
  • 存在key（但是就以index為key）

{

    this.state.list.map((item, index) => {

        return <Button
                key={index}
                size='long'
                btnType='primary'
                isRadius={false}
                style={{width:'100%'}}
            >{item}</Button>


    })

}

• 預期情況：

  • 應該和情況一相同，唯一區別是不會報warming了

• 真實情況：

  
  
  image.png

• 情況三：

  • beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
  • 存在key（unique）

{

    this.state.list.map((item, index) => {

        return <Button
                key={item}
                size='long'
                btnType='primary'
                isRadius={false}
                style={{width:'100%'}}
            >{item}</Button>


    })

}

• 預期情況：
  • 前后key值沒有一個不同那么所有實例都會被卸載重建
• 真實情況：

image.png

• 情況四
  • beforeState:list: [1,2,3,4]---afterState:list: [1,2, 'c', 'd']
  • 存在key（unique）
  • 預期情況：
    • key為12的實例會執行接收參數改變的操作，key為3，4--‘c','d'的實例會銷毀重建
  • 真實情況

image.png

以上基本涵蓋的大部分key的使用方式，和隱式key是什么值，所以在map時增加key時不要用index,最好為unique值