本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号.1.它是什么先举个react组件中列表渲染的例子：constdata=[{id:0,name:'abc'},{id:1,name:'def'},{id:2,name:'ghi'},{id:3,name:'jkl'}];constListItem=(props)=>{return
{props.name};};constList=()=>{return(
);};然后你可以看到reactPromptedwarningmessage:Eachchildinalistshouldhaveaunique"key"prop的输出。根据含义，渲染列表的每个子元素都应该需要一个唯一的键值。这里可以使用list的id属性作为key值来解决上面的warningconstList=()=>{return(
);};2.和Vue一样，React也有diff算法，通过元素的key属性来判断一个元素是新建的还是移动的元素，从而减少不必要的Diff。因此，key的值需要为每个元素赋予一定的标识。如果在列表数据的渲染中，在数据后面插入了一条数据，key就没有太大用处了，如下：this.state={numbers:[111,222,333]}insertMovie(){constnewMovies=[...this.state.numbers,444];this.setState({movies:newMovies})}
{this.state.movi??es.map((item,index)=>{return- {item}
})}
前一个元素在diff算法中，因为前一个元素是完整的都是一样的，不会产生删除和创建操作。在最后的比较中，它们需要被插入到新的DOM树中。因此，在这种情况下，元素是否具有key属性并没有多大意义。我们再来看看前面插入数据时，使用key和不使用key的区别：insertMovie(){constnewMovies=[000,...this.state.numbers];this.setState({movies:newMovies})}当你有key的时候，React会根据key属性匹配原始树上的子元素和最新树上的子元素。在上面的例子中，只需要将000元素插入到前面的位置即可。没有key时，需要修改所有li标签。同样，和并不意味着拥有键值就意味着更高的性能。如果只改变文本内容，不写key性能和效率会更高。主要原因是如果不写key，所有的文本内容都会被替换掉，节点不会发生变化。它涉及节点的添加和删除。如果发现旧密钥不存在，则将其删除。如果新的key之前不存在，就会插入，这样会增加性能开销，注意事项是：key应该是唯一的key，不要使用随机值（随机数会在下次render时重新生成一个数）避免使用index作为keyReact判断key的过程如下：参考https：//zh-hans.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapperhttps://segmentfault.com/a/1190000017511836
