У форм в React плохая производительность?

Question

Я учусь использовать <form> в React, и в большинстве примеров, которые я видел, используется комбинация 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 каждый раз, когда они обновляются, и компонент будет повторно отображаться при каждом нажатии клавиши.

Учитывая, как люди могут печатать довольно быстро, может ли это быть предметом беспокойства?

Answer 1

В небольшом тестировании я обнаружил, что React успешно выполняет поверхностное сравнение в состоянии и изменения в DOM только для компонентов, которые требуют повторного рендеринга.В Chrome я включил подсветку (мигание краски) областей, которые были перекрашены с помощью React в DOM.

См. Краска мигает в действии.

В моем примереобратите внимание, что 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 будет постоянно обновляться, но это может быть не самым страшным, так как, скорее всего, он не будет повторно отображать страницу при каждом нажатии клавиши.