立志用功如种树然，方其根芽，犹未有干；及其有干，尚未有枝；枝而后叶，叶而后花。——王守仁
我们在React遍历渲染列表时会遇到这样一个报错：
意思是说，渲染list列表时必须给每个元素指定一个唯一的key
当然你可以选择忽略这个报错，但是为什么会提示这个报错呢？
假设我们给key指定一个随机数，或者干脆不指定的话，会怎么样呢？
官方文档给出了答案：
也就是说，如果给key指定一个随机数，或者干脆不指定的话，会造成性能问题
这个时候，我们想到了用遍历时的元素下标作为key
但是官方文档明确告诉我们：
如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。可以看看 Robin Pokorny 的深度解析使用索引作为 key 的负面影响这一篇文章。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。
这里Robin Pokirny的文章中提到了，如果满足这三者，可以放心使用index作为key
- 列表和项目是静态的——它们不会被计算，也不会改变
- 列表中的项目没有ID
- 列表永远不会被重新排序或过滤
我精简了文章Demo中的了代码，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>index-as-a-key-is-an-anti-pattern</title> </head> <body> <!-- We will put our React component inside this div. --> <div id="root"></div> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- Load our React component. --> <script src="index.js" type="text/babel"></script> </body> </html>
index.js：
class Item extends React.Component { render() { return ( <div className="form-group"> <label>{this.props.name}</label> <input type="text" /> </div> ) } } class Example extends React.Component { constructor() { super(); this.state = { list: [ { name: '原来有的: 1444610101010', id: 1444610101010 }, { name: '原来有的: 1444600000000', id: 1444600000000 } ] }; } addItem() { const id = +new Date; this.setState(state => ({ list: [{ name: '新增的' + id, id }, ...state.list] })); } render() { return ( <div> <button className='btn btn-primary' onClick={this.addItem.bind(this)}><b>Add item</b> to the beginning of the list</button> <h3>Dangerous <code>key=index</code></h3> <form> {this.state.list.map((todo, index) => <Item {...todo} key={index} /> )} </form> <h3>Better <code>key=id</code></h3> <form> {this.state.list.map((todo) => <Item {...todo} key={todo.id} /> )} </form> </div> ) } } ReactDOM.render(<Example />, document.querySelector('#root'))
这里效果如下：
两个list中，第一个是使用index作为key的，第二个是用的id作为key
我们在文本框随便写点什么
此时我们点击按钮，新增一行，神奇的事情发生了
我们可以看到第一个list出现了错误，我们新增的一行文本框中竟然包含了原来有的文本框的值，并且列表中下方其他的文本框也错乱了
而我们使用id作为key的就没有出现这种问题。。。因此，我们在不满足上面说的三种条件时，在react中尽量不要使用元素下标作为key
