Javascript 理解react中的状态输入

我有一个方法

submitMessage

，该方法应该连接存储在输入状态中的当前消息，然后清除它：

submitMessage() {
  this.setState({
    input: '',
    messages : [...this.state.messages, this.state.input]
  });
}

该方法正在按预期工作，整个应用程序也是如此，我不明白的是，为什么可以在连接之前清除输入，是输入和

此.state.input

不在内存中的同一位置

这是我的全部代码：

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }    
  }
  handleChange(event) {
    this.setState({
      input: event.target.value,
      messages: this.state.messages
      })
  }
  submitMessage() {
    this.setState({
      input: '',
    messages : [...this.state.messages, this.state.input]
    })
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange.bind(this)} value={this.state.input} />
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>{this.state.messages.map((item) => {
            return <li key={item + 1}>{item}</li>
          })}
        </ul>
      </div>
    );
  }
};

类显示消息扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“”，
信息：[]
}    
}
手变（活动）{
这是我的国家({
输入：event.target.value，
消息：this.state.messages
})
}
submitMessage（）{
这是我的国家({
输入：“”，
消息：[…this.state.messages，this.state.input]
})
}
render（）{
返回(
键入新消息：
提交
{this.state.messages.map（（项）=>{
return
{item}
})}

);
}
};

为什么

和

这个.state.input在内存中不在同一个位置

input
是一个HTMLDOM元素，而另一个
this.state.input
是一个javascript对象，它们是两个完全不同的东西。两者之间唯一相关的是JSX语法和react框架

为什么在消息连接之前可以清除输入

在react中，状态和道具被视为不可变对象，而react状态在渲染周期之间工作。任何单个周期内的所有状态更新都将排队，并为下一个渲染周期进行批处理。将
this.state.input
设置为空字符串，并将其附加到
this.state.messages
数组中，以便为下一个渲染视图进行处理

就下一个计算状态而言，以下各项都是等效的：

this.setState({
  input: '',
  messages: [...this.state.messages, this.state.input],
});

及

及

甚至

this.setState({ input: '' });
this.setState({
  messages: [...this.state.messages, this.state.input],
});
this.setState({
  messages: [...this.state.messages, this.state.input],
});

最后一个您可能会感到惊讶（什么！？），但是回想一下，state state是不可变的，并且是批处理的，因此在更新
消息的情况下，
this.state.messages
和
this.state.input
在两个调用中具有相同的值，因此，最后一个调用的值设置了状态。顺便说一句，（在这个问题的范围之外），函数状态更新有助于解决最后一个示例中的问题。
input
是一个html DOM元素，另一个，
this.state.input
是一个javascript对象，它们是两个完全不同的东西。你说“…为什么
这个.state.input在连接之前没有被清除”是什么意思？我修正了我的问题，但我想你回答了它，当你说submitMessage（）{this.setState（{input:''，messages:[…this.state.messages，this.state.input]}），状态更改将反映在下一次渲染中。将输入设置为空，然后在新行上访问它，仍然会返回旧状态。这就是setState的工作方式。啊，是的，我现在明白了。您询问如何设置
输入：“”
消息上方的行：[…this.state.messages，this.state.input]
works。在react中，状态和道具将被视为不可变对象，react状态在渲染周期之间工作，任何单个周期内的所有状态更新都将排队，并在下一个渲染周期进行批处理。@Drewrese谢谢，它回答了我的问题，你能将其作为答案重新发布，以便我验证你吗？
this.setState({ input: '' });
this.setState({
  messages: [...this.state.messages, this.state.input],
});

this.setState({ input: '' });
this.setState({
  messages: [...this.state.messages, this.state.input],
});
this.setState({
  messages: [...this.state.messages, this.state.input],
});