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

Answer 2

通过重新渲染组件，您还可以在所有子组件上重新呈现链式反应。

如果您希望阻止子组件重新渲染（例如，如果某些传递的道具没有更改），您可以使用生命周期方法shouldComponentUpdate()。

class Item extends React.Component {
    shouldComponentUpdate(nextProps) {
        // only re-render if props.value has changed
        return this.props.value !== nextProps.value;
    }

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

Answer 3

每当状态发生变化时，整个组件都将由React重新呈现。如果您尚未将true函数设置为返回shouldComponentUpdate()，则默认为false。看看React's component lifecycle。

React重新渲染数组，而item键未更改

3 个答案: