Управляемый компонент ReactJS и неизменяемые данные

Интересно, как управляемые компоненты (например, поле ввода) могут быть реализовано, если данные приложения основаны на неизменяемых данных, и приложение использует операторы равенства "===" в shouldComponentUpdate() для быстрого повторного рендеринга.

Предположим, что глубоко вложенные данные и контролируемый компонент находятся где-то глубоко в иерархии:

Когда используется состояние локального компонента (setState()), как это обычно реализуется, изменения не видны для реакции, поскольку процесс рендеринга иерархии компонентов может пропускать ветви, поскольку неизменяемые данные не изменились. Чтобы избежать этого, все состояние локального компонента должно жить в состоянии приложения, и каждое событие в контролируемом компоненте (например, ввод в поле ввода) должно приводить к изменению неизменяемых данных.

Хотя это должно работать, это (единственный) способ реализации контролируемых компонентов при использовании неизменяемых данных??? Выполнение всего этого с потоком (запустить действие, получить данные хранилища...) может потребовать много накладных расходов/циклов для чего-то простого, например ввода в поле ввода.


reactjs flux immutable.js reactjs-flux
person JoeFrizz    schedule 01.02.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Состояние компонента — отличное место для размещения данных, которые вам не нужны для сохранения или доступа из нескольких мест. Типичным примером этого является неотправленная форма. Когда пользователь отправляет форму, вы можете передать локальное состояние вверх (обратные вызовы в реквизитах) или горизонтально (действия, эмиттеры событий, API и т. д.).

Кроме того, об отказе от обновления единственный раз, когда вызов setState не вызовет обновление в том же компоненте, - это если у вас слишком отрицательное значение shouldComponentUpdate. Если вам нужно локальное состояние, shouldComponentUpdate должен это учитывать.

person Brigand    schedule 02.02.2015

arrow_upward
0
arrow_downward

Часто приходится выбирать между размещением состояния в хранилище или его локальным хранением. Оба подхода хорошо работают с неизменяемыми коллекциями.

Локальное состояние обрабатывается с помощью setState, без прямого доступа к this.state. Строки JS неизменяемы, так что не о чем беспокоиться

onChange: function(event) {
  this.setState({value: event.target.value}); 
}

Отправка в магазин почти такая же:

onChange: function(event) {
  var flux = this.getFlux();
  flux.actions.setSomeValue(event.target.value);
}

Store получает действия и выполняет update/updateIn в неизменяемой коллекции.

person Anton Zemlyanov    schedule 17.02.2015