javascript - 了解 ReactJS 受控表单组件

Question

我正在根据以下页面实现以下代码:https://facebook.github.io/react/docs/forms.html

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    let data = {
      isGoing: this.state.isGoing,
      numberOfGuests: this.state.numberofGuests
    }

    /* Send data in ajax request here */

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我对此有一些疑问:

1. 为什么我们需要将组件值存储在状态中？为什么不只需在正常提交表单时获取我们需要的值会用标准的 JavaScript 完成吗？推荐的方法似乎是为每个输入或删除的字符重新加载 render 函数。对我来说，这没什么意义。
2. 由于 setState 的执行是异步的，并且 this.setState() 和使用 this.state.numberOfGuests 实际访问状态之间可能存在延迟，这是否意味着这段代码可能会在设置之前获取状态？如果是这样，为什么官方 React 文档中建议使用这段代码？如果不是，为什么不呢？

Answer 1

关于第二点，是的，handleSubmit 可以在 handleInputChanged 中的状态更新完成之前运行，这在逻辑上是可能的。这在 React 文档中没有提到，或者通常是任何人关心的原因是因为 setState 函数运行真的很快。作为一个实验，我做了 a codepen to determine the average time taken for setState to run .似乎大约需要 0.02 毫秒。没有人可以更改他们的输入，然后在不到那个时间的时间内提交表单。事实上，handleSubmit 中的 e.preventDefault() 调用无论如何都花费了将近四分之一的时间。

如果在继续之前 setState 已经完成是绝对重要的情况，那么您可以使用回调函数来 setState，例如

this.setState({
    colour: 'red'
}, () => {
    console.log(this.state.color)
});

然后 red 将始终 被记录，这与可能记录先前值的以下情况相反。

this.setState({
    colour: 'red'
});
console.log(this.state.color);