6

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

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 组件会重新呈现。

但是，如果我的理解是正确的，则不应重新渲染这些项目，因为关键项目没有改变。但它确实会重新渲染，因为时间戳已更新。

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

4

3 回答 3

8

你的理解是完全错误的

的全部目的key是为了ordering而不是rendering。图像您有项目 a,b,c,d 并通过开关 a 和 c 重新排序它们，即 c,b,a,d。没有密钥，react 很难弄清楚如何从旧的虚拟 DOM 转换为新的虚拟 DOM。

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

于 2017-07-28T06:03:47.667 回答
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>
        );
    }
}
于 2017-07-28T03:48:30.757 回答
0

每当你的状态改变时，整个组件都会被 React 重新渲染。true如果您没有将shouldComponentUpdate()函数设置为 return ，则默认为false。看看React 的组件生命周期。

于 2017-07-28T03:48:50.397 回答