React 中的 key 为何物？

数组和迭代器循环出的 DOM 元素要设置唯一的，固定不变的 key 值。

设置了 key 以后，页面更新时，React 会根据这个 key，只更新或重新渲染更改的组件，没有更改的组件则直接移动，而不是将它们从 DOM Tree 中移除然后再将它们重新创建，实现了复用，提高了渲染效率。

Key 是 React 识别 DOM 元素的唯一标识，不真实存在，也不能被 Props 读取。React 根据 Key 来决定是销毁重建组件还是更新组件。

不建议使用 index 作为 key 值，有时候会出现意想不到的结果。

来看个使用 index 作为 key 的反模式例子：

export default class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            arr: ['a','b','c']
        }
    }

    reverse = () => {
        this.setState({
            arr: this.state.arr.reverse()
        })
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.arr.map((item, idx) => {
                            return <li key={idx}>{item}<input /></li>
                        })
                    }
                </ul>
                <button onClick={this.reverse}>reverse</button>
            </div>
        )
    }
}

点击了 reverse 按钮后变成了这样

显然这个效果不是我们想要的。

出现这个情况，是因为 React 是以 key 来唯一标识组件的，当发现 update 前和 update 后 key 值没有变化，react 就会认为 update 前后是同一个组件，进而只会对内部的属性进行修改。拿上述例子分析，react 会作出这样的判断：

• 检查 key 值，发现都是0，判定为同一个组件；
• 检查 item 部分，发现有变化，重新渲染这部分；
• 检查 input 部分，发现不依赖 state 和 props，所以不进行重新渲染；

优化方法：

用 item 作为 key 值。