Проблема производительности при рендеринге в ReactJS

Question

Из того, что я читаю, желательна практика работы с элементами формы и обновлениями состояния:

onChange = (event) => {
    this.setState({
        name:event.target.value
    })
}

, где выше - обработчик события для поля ввода:

<input 
    type="text"
    onChange={this.onChange}
    value={this.state.name}
/>

И так мы обновляем состояние, а также само поле ввода.

Теперь, если мы поместим console.log (new Date ()) внутри функции рендеринга, мы можем заметить, что рендеринг вызывается при каждом нажатии клавиши в поле ввода.

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

Редактировать 1: Представьте себе сложное управление формой, много сложного элементы формы, которые могут быть более сложными элементами управления ... Так что этот ввод находится внутри этого сложного компонента, который своевременно рендерится. Теперь, можете ли вы ожидать (когда-либо случалось с вами), что повторный рендеринг при обновлении состояния (при вводе) вызовет проблему с производительностью (видимая задержка).

Answer 1

Вот как построен React. См. Официальный do c.

. Вы можете использовать веб-инспектор и ввести текст, чтобы проверить, что перерисовывается, и это только текстовое поле ввода.

Да, он получает Вызывается каждый раз, когда вы печатаете, но только то, что изменяется , на самом деле повторно отображает.