react中的key

列表中的key

Key需要在列表中唯一，可以使用id作为值

  • 没有的话可以使用列表的index
  • 使用index作为key可能会有负面影响 列表的顺序可能发生变化，性能下降，组件状态可能会有问题

key稳定利于保证diff效率

key需要稳定，可预测，并且在列表内唯一 否则会导致性能下降，组件状态丢失

为什么使用index作为key可能会产生问题？

看一个例子

其中，有一个list展示数据的id与input，addItem方法会向list的开头添加一个元素。在使用index作为key的情况下，新添加的item在前列，已经输入的值出现在新添加的item中。

而在使用id作为key的例子中，已输入值的item会排列在后方，input并不会乱套。

生成id可以使用npm包 shortid

shortid

类似如下方法： var shortid = require(‘shortid’); function createNewTodo(text) { return { completed: false, id: shortid.generate(), text } }

如果认为生成每次都使用id为key很麻烦，那么在如下3个情况下，使用index也不会产生问题：

  1. 如果list中的item都是静态的，他们不是被计算的，并且不会修改
  2. 如果list中的item数据本来没有id
  3. 如果这些item永远不会重新排序，或者过滤