反应重新渲染数组，但项键未更改

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>
        );
    }
}

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

但是，如果我的理解是正确的，则由于关键项没有更改，因此不应重新渲染这些项。但是自从时间戳更新以来，它确实会重新呈现。

有人可以解释我为什么吗？

Answer 1

您的理解是完全错误的

的全部目的key是为了ordering而非rendering。图像中有项a，b，c，d，并通过开关a和c（即c，b，a，d）对其重新排序。如果没有密钥，很难做出反应以找出如何从旧的虚拟DOM转换为新的虚拟DOM。

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