react-key

• 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值