React 中的key & 启发式算法

Key 是React循环遍历数组(map)构建列表时用到的一个特殊字符串属性。Key可以帮助React识别出被修改、添加、删除的Item，未修改的元素直接复用，从而提高渲染性能。

1、组件中的Key

 在开发React同一层级相同类型的组件（列表组件）中，强烈官方强烈推荐显示定义Key属性，因为这会有效的提升渲染性能。未显示定义key属性时，默认为索引index，开发过程中控制台会输出一个warning，在发布版本构建中不影响应用使用。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

2、启发式算法

为什么定义了Key属性可以提升渲染性能？这和React提出的O(n) 的启发式算法有关。

1、两个不同类型的元素会产生出不同的树；
2、开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定；

• 即当跟节点原生元素类型不一样时，React 会卸载原来的树并且建立起新的树
• 当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素，即当父组件执行render方法时，同一个Key对应唯一的子组件。

对比两颗树时，React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态。相同类型根节点中子元素key相同，则认为是相同的子组件，React直接复用此组件。

3、Key定义的规则

    3.1 唯一：  key 不需要全局唯一，但在列表中需要保持唯一

    3.2 稳定：在父组件执行render方法时，子组件的key不会因为重新渲染而改变    

不稳定的 key（比如通过 Math.random() 生成的）会导致许多组件实例和 DOM 节点被不必要地重新创建，这可能导致性能下降和子组件中的状态丢失。

推荐使用数组中唯一不变的ID 作为key，在数组不会进行排序、插入等操作的情况下，可以使用数组下标作为key 。官网给出了2个 展示使用下标作为 key 时导致的问题，以及不使用下标作为 key 的例子的版本，修复了重新排列，排序，以及在列表头插入的问题 ，很值得学习体会如何正确的定义Key。