Question

我正在学习如何在React中使用<form>，并且我看到的大多数示例都结合使用state和onChange来跟踪表单的输入：< / p>

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方法，并且每次按键时该组件都会重新呈现。

看到人们如何快速打字，这是一个值得关注的领域吗？

Answer 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>
    )
  }
}

Answer 2

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

React中的表单性能不好吗？

2 个答案: