Reactjs 嵌套setState有意义吗？

我偶然发现了下面的代码，我想知道它是否有任何区别

this.setState（{name:xx}，（）=>this.setState（{age:17}））

vs

this.setState（{name:xx，age:17}）；

它们是否完全相同，或者第一种方法实际上会确保首先更新

name

状态，并在更新状态之前强制重新渲染

age

this.setState({ name: xx }, () => this.setState({ age: 17 })) 

---

使用此选项，您可以确保只有在名称设置为xx后，年龄才设置为17。但在后一种情况下，它可以在同一时间发生，也可以按任意顺序发生，因为setState是异步的。

两种方法都可以，但问题是为什么需要这样做？

---

这将花费你一个新的渲染。当然，如果你不阻止的话。

是的。有嵌套状态是有意义的

嵌套状态更新可确保：

The state of first variable is updated.
The component is updated (re-rendered).
The state of second variable is updated.
The component is updated (re-rendered) again.

为了测试这一点，我在react项目中添加了上述两种情况。请在此处查看回购协议：

https://github.com/kramankishore/React-Nested-State

为了测试组件是否被重新呈现，我在shouldComponentUpdate（）函数中添加了一个控制台日志

组件更新按以下顺序进行：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

当您在浏览器中检查控制台日志时，在正常情况下，您可以看到“Rerender tricked！”只记录一次。但是在嵌套的情况下，您可以看到它被记录了两次，表明组件被更新了两次

以下是您想要尝试的组件代码：

import React, { Component } from "react";

class NestedState extends Component {
  state = {
    var1: 0,
    var2: 0,
    var3: 0,
    var4: 0
  };

  incrementHandler = () => {
    this.setState({ var1: this.state.var1 + 1, var2: this.state.var2 + 1 });
  };

  incrementHandlerNested = () => {
    this.setState({ var3: this.state.var3 + 1 }, () =>
      this.setState({ var4: this.state.var4 + 1 })
    );
  };

  shouldComponentUpdate() {
    console.log("Rerender triggered!");
    return true;
  }

  render() {
    return (
      <div>
        <h1>Normal</h1>
        <a>{this.state.var1}</a>
        <a>{this.state.var2}</a>
        <div />
        <button onClick={this.incrementHandler}>Increment</button>
        <h1>Nested</h1>
        <a>{this.state.var3}</a>
        <a>{this.state.var4}</a>
        <div />
        <button onClick={this.incrementHandlerNested}>Increment</button>
      </div>
    );
  }
}

export default NestedState;

嵌套案例输出（在浏览器控制台中）：

---

希望这有帮助

没错，这就是我偶然发现的代码。所以我的目标是找出是否有我从未想过的事情

Rerender triggered!

Rerender triggered!
Rerender triggered!