javascript - 在反应中对表单元素的每个 onChange 设置状态是否正确？（OnChange vs ref）

Question

一段时间以来，我一直在使用 react 开发应用程序。我使用 react 的官方网站和其他来源的示例。但是，我有一个问题。为什么要在每个输入元素的 onChange 中设置状态？这会导致页面不必要的渲染。让我用一个简单的例子来解释我自己。

让我们有一个输入文本框。如果用户在输入值后按下提交，我们希望在屏幕上显示该值。我可以用两种方法来做这个例子。但我不知道该选择哪一个。如果您能帮助我，我将不胜感激。

在示例 1 中，仅当我单击提交按钮时才呈现页面。

但是，在示例 2 中，情况有所不同。为我在文本框中输入的每个值呈现页面。当我按下提交按钮时，页面被渲染。

当我在互联网上查看时，它通常显示为示例1。它在2个示例中给出了相同的结果。但我应该更喜欢哪一个？

示例 1：

class App extends React.Component {
    state = {
       value: ''
    }

handleSubmit = e => {
     e.preventDefault();
     this.setState({ value: this.textInput.value})
 };

render() {
  return (
    <div>
      <h1>React Ref - Callback Ref</h1>
      <h3>Value: {this.state.value}</h3>
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={e => this.textInput = e} />
        <button>Submit</button>
      </form>
    </div>
  );
 }
}
ReactDOM.render(<App />, document.getElementById("root"));

示例 2：

class App extends React.Component {
   state = {
     value: ''
   }

  handleSubmit = e => {
    e.preventDefault();
    this.setState({ value: e.target.value})
  };

  onChange = e => {
    this.setState({ value: e.target.value})
  };

  render() {
    return (
      <div>
        <h1>React Ref - Callback Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.onChange} />
          <button>Submit</button>
       </form>
     </div>
   );
 }
}

ReactDOM.render(<App />, document.getElementById("root"));

标签： javascriptreactjssetstateref