React:List and key

在React中，可以通过数组方法返回一组 组件元素，并将该数组作为render()的js插值。

 1 function NumberList(props) {
 2   const numbers = props.numbers;
 3   const listItems = numbers.map((number) =>
 4     <li>{number}</li>
 5   );
 6   return (
 7     <ul>{listItems}</ul>
 8   );
 9 }
10 
11 const numbers = [1, 2, 3, 4, 5];
12 ReactDOM.render(
13   <NumberList numbers={numbers} />,
14   document.getElementById('root')
15 );

当我们创建列表时，要记得在列表元素中（不单指li，一组div或其他以数组形式渲染的标签也一样）添加key特性。key的值是一个字符串，它表示在列表中该元素的标志（或者说id）。key的作用主要是让DOM在重新渲染前能比较出列表中的哪些元素不必重新渲染，降低了开销。“When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.”-- in-depth explanation about why keys are necessary

1   const listItems = numbers.map((number) =>
2     <li key={number.toString()}>
3       {number}
4     </li>
5   );

生成组件数组时，如果元素本身有id，我们将id作为数组元素的key即可；如果没有的话，我们往往会使用index索引替代。但文档不推荐，因为当生成的列表在以后的行为中发生动态增删/重新排序的话，索引就没意义了，此时重新渲染的效率依然不高。

为什么呢？因为React使用key，是为了标识组件。key相同的时候，React只会更新组件的已变化属性，key不同时，才会销毁重新创建。

举例，用数组['Alan','Mar','Kat']生成一组li，以索引为key，得到：

(key0)Alan，input1

(key1)Mar ，input2

(key2)Kat ，input3

对数组进行排序后，['Kat','Alan','Mar']，此时再以索引为key生成列表，得到：

(key0)Kat ，input1

(key1)Alan ，input2

(key2)Mar ，input3

发现名字后面对应的原先的input并未发现更新。因为对React来说，key相同的组件被React认定是同一个组件，哪怕名字在排序后改变，并在重新渲染后体现，但原先的key0和现在的key0仍被看作同一个组件，其底下的input不会发生更改。

*key应该放在数组所在上下文的（自定义）元素的特性上。

 1   const listItems = numbers.map((number) =>
 2     // Correct! Key should be specified inside the array.
 3     <ListItem key={number.toString()}
 4               value={number} />
 5   );
 6   return (
 7     <ul>
 8       {listItems}
 9     </ul>
10   );

由于往往用数组方法如map生成组件数组，因此在map方法中给元素加key就好了。

在render函数return的JSX中：

 1       {numbers.map((number) =>
 2         <ListItem key={number.toString()}
 3                   value={number} />
 4       )}
 5     
 6 
 7 
 8 等价于
 9 const listItems = numbers.map((number) =>
10     <ListItem key={number.toString()}
11               value={number} />
12   );
13     //...
14 
15     <ul>
16       {listItems}
17     </ul>

刚看到一篇关于react的所谓学习路线：react入门、react router、redux 然后是 react native

这让我想起vue、vue router、vuex.......

真的吼相似.......