Question

此问题是对以下问题的最高评分答案的扩展和可能的解释。

What do these three dots in React do?

因此，在该问题中，用户将其写为

扩展表示法不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象也很方便-在更新状态时会遇到很多问题，因为您不能直接修改状态：

从他的陈述中选择一行：因为您不能直接修改状态。

现在，我尝试使用setState修改状态并成功完成此操作，因此我无法弄清他的陈述后面的引用或含义，因此首先任何人都可以对其进行解释吗？

通过阅读互联网上的一些文章，我能够理解我们应该使用传播算子而不是直接对其进行变异，但是我们为什么应该这样做仍然不清楚。

setState的理论定义是： spread运算符允许在需要多个元素/变量/参数的地方扩展表达式。

再次引用我所引用的答案。

此声明合适且有意义

<Modal {...this.props} title='Modal heading' animation={false}>

将与

相同

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

但是从我对React代码的各种接触中，人们会做这样的事情

addIngredientHandler = (type) => {
const oldCount = this.state.ingredient[type] 
        const updatedCount = oldCount + 1; 
        let updatedingredients = {
          ...this.state.ingredient
        };
        updatedingredients[type] = updatedCount;

    this.setState({ingredient: updatedingredients});
}

不仅仅是这样做

 addIngredientHandler = (type) => {
    const oldCount = this.state.ingredient[type] 
    const updatedCount = oldCount + 1; 
this.setState({ingredient[type]: updatedCount});
  }

有人可以帮助我理解上述示例中使用传播运算符的优势吗？为什么我们要像这样使用它？

Answer 1

例如：A = {b: {c: D, e: F}，其中D和F是对象。说，D需要改变。但是F并没有改变。

如果您去A.b.c.someChange = 'new value'

然后知道A是否已更改的方法是 1）仅当我在进行更改之前制作了深拷贝A1 = JSON.parse(JSON.stringify(A))时， 2）是否将A内的每个值与A1的对应值进行深入比较

另一种方法是，每当您更改对象时，都同意对其进行浅表复制。

A1 = {b: {...A.b, c: {...A.b.c, someChange: 'new value'}}}

在这里您可以看到F仍然是A.b中的同一对象。但这是同级的，所有父母都成了自己的新浅表。

现在要知道A是否已更改，您只需进行相等检查A !== A1。内部的所有值也一样。 A.b.e === A.b.e将是唯一的true。

重要的一点是，这与setState无关，与props无关，以及React如何使用shouldComponentUpdate方法决定组件是否需要渲染。

基本上，如果您对突变很聪明，并且使用散布运算符，那么React可以避免一些不必要的渲染。

如果您不愿意回答该问题，请继续阅读shouldComponentUpdate方法，一切将变得更加有意义。

了解散布运算符的正确用法

1 个答案: