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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

Локальное состояние обрабатывается с помощью 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); 
} 

магазин получает действия и сделать обновление/updateIn в непреложной коллекции