React 中的表单性能很差吗？答案

【问题标题】：Do forms in React have bad performance?React 中的表单性能很差吗？
【发布时间】：2018-09-25 19:02:34
【问题描述】：

我正在学习如何在 React 中使用 <form>，我见过的大多数示例都使用 state 和 onChange 的组合来跟踪表单的输入：

class Form extends React.Component {      
  handleChange(event) {
      this.setState({
          inputvalue: event.target.value
      })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
           <label>Name</label>
           <input type="text" value={this.state.inputvalue} onChange={this.handleChange.bind(this)}/>
           <input type="submit" value="Submit"/>
      </form>
    );
  }
}

但是，假设我有很多 <input>，甚至还有一些 <textarea>，它们可能会经常变化。在这种情况下，他们每个人都会在每次更新时调用onChange 方法，并且组件将在每次按键时重新渲染。

看到人们如何快速打字，这是否值得关注？

【问题讨论】：

我很想看到非常熟悉 react 代码的人提供的超级详细的答案，但根据我作为 react 用户的经验，对于普通的 react 应用程序来说，这不是什么值得担心的事情。常识说它肯定比让浏览器做它自己的事情要慢，但是 react 已经针对这种情况进行了优化，我认为在正常情况下你不会注意到任何延迟。
也就是说，如果您担心性能，我不会像您那样将您的函数绑定到渲染方法中。这意味着您每次渲染都会创建一个新的函数实例，因此 react 最终会做比必要更多的工作。当您担心渲染过多时，最好在构造函数中绑定。
表单没有。应用程序可以。上面的评论对绑定有一个很好的观点。如果担心频繁更新，可以在 onChange 上进行 debounce。

标签： reactjs forms performance

【解决方案1】：

在一个小型测试中，我发现 React 成功地在状态中执行了浅比较，并且仅在需要重新渲染的组件中对 DOM 进行了更改。在 Chrome 中，我启用了 React 在 DOM 中重新绘制的区域的高光（Paint Flashing）。

查看Paint Flashing 的实际应用。

在我的示例中，请注意 onChange 将在每次击键时运行以更新 React 状态，显示的值将随着用户类型而更新（基于 React Docs https://reactjs.org/docs/forms.html#controlled-components）。

你也可以在这里看到我的代码：https://codepen.io/anon/pen/KxjJRp

class Application extends React.Component {
  state = {
    value1: "",
    value2: "",
    value3: "",
    value4: ""
  }

  onChange = ({target: {value, name}}) => {
    this.setState({
      [name]: value
    })
  }

  render() {
    const { state: { value1, value2, value3, value4 } } = this
    return (
      <div>
        <label>Value 1</label>
        <input type="text" value={value1} name="value1" onChange={this.onChange}/>
        <label>Value 2</label>
        <input type="text" value={value2} name="value2" onChange={this.onChange}/>
        <label>Value 3</label>
        <input type="text" value={value3} name="value3" onChange={this.onChange}/>
        <label>Value 4</label>
        <input type="text" value={value4} name="value4" onChange={this.onChange}/>
      </div>
    )
  }
}

【讨论】：

【解决方案2】：

我不完全确定处理此问题的最佳方法，但我可以看到设置 onblur 方法来处理更新状态的实现。 onChange 会不断更新，但这可能不是最糟糕的事情，因为它可能不会在每次击键时重新呈现页面。

【讨论】：