arrays - React 重新渲染数组，而 item key 没有改变

Question

非常基本的列表代码示例:

class List extends React.Component {
    render() {
        const listComponent = this.props.numbers.map((number) =>
            <Item key={ number.toString() } value={ number } />,
        );

        return (
            <div>
                <button onClick={ () => this.setState({ test: 1 })}>Re-render list</button>
                { listComponent }
            </div>
        );
    }
}

这是该项目:

class Item extends React.Component {
    render() {
        return (
            <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div>
        );
    }
}

当我单击按钮时，状态会更新，因此列表组件会重新呈现。

但是，如果我的理解是正确的，则不应重新渲染项目，因为关键项目尚未更改。但由于时间戳更新，它确实会重新渲染。

有人可以解释一下为什么吗？

Answer 1

你的理解完全错误

key 的全部目的是用于排序，而不是渲染。假设您有项目 a、b、c、d，并通过开关 a 和 c 对它们重新排序，即 c、b、a、d。如果没有 key，React 就很难弄清楚如何从旧的虚拟 DOM 转换到新的虚拟 DOM。

请阅读此内容 https://facebook.github.io/react/docs/lists-and-keys.html