React:List and key

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

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

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

当我们创建列表时，要记得在列表元素中（不单指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

  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

生成组件数组时，如果元素本身有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应该放在数组所在上下文的（自定义）元素的特性上。

  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );

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

在render函数return的JSX中：

      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    


等价于
const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
    //...

    <ul>
      {listItems}
    </ul>

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

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

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