javascript - 理解 React 中的状态输入

Question

我有一个方法submitMessage，它应该连接已存储在我的输入状态中的当前消息，然后清除它:

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

该方法和整个应用程序都按预期工作，我不明白的是为什么输入可以在连接之前被清除，输入和 this.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>
    );
  }
};

Answer 1

Why are <input /> and this.state.input not in the same place in memory?

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

Why can input be cleared before the message concatenation?

在react中，state和props被视为不可变对象(immutable对象)，并且react状态在渲染周期之间起作用。任何单周期内的所有状态更新都会排队并为下一个渲染周期进行批处理。设置this.state.input到一个空字符串并将其附加到 this.state.messages数组排队等待处理下一个渲染 View 。

以下内容在下一个计算状态方面都是等效的:

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

和

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

和

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],
});

最后一个您可能会感到惊讶(什么!？)，但请记住状态状态是不可变的并且是批处理的，因此在更新 messages 的情况下, this.state.messages 和 this.state.input在两个调用中具有相同的值，因此，最后一个调用是设置状态的。顺便说一句，(超出了这个问题的范围)，功能状态更新有助于解决最后一个示例的问题。