Неизменное состояние - это функциональная особенность ReactJs?

Question

Важнейшей особенностью императивной программы является состояние и их модификации.

ReactJs поддерживает как можно больше функциональных стилей программирования (например, используя чистоту, функции высшего порядка). Я хочу знать, использует ли неизменяемое состояние в ReactJs эту характеристику до сих пор как обязательную функцию или ее можно рассматривать как функциональный "стиль состояния"?

Теоретически, в чем разница между состоянием React и состоянием в чисто императивных программах?

Answer 1

Теоретически, в чем разница между состоянием React и состоянием в чисто императивных программах?

• Состояние реакции описывает, как должны быть представлены вещи.
• Императивное состояние перечисляет шаги, необходимые для перехода из состояния A в состояние B (я полагаю, вы уже сказали, что, когда вы сказали "[самая] важная особенность императивной программы - это состояние и его модификации").

Вся цель обновления состояния (используя this.setState) в React уведомляет компонент о том, что состояние обновлено, и требуется повторная визуализация.

Но, в конечном счете, если вы хотите перейти из состояния A в состояние B в React, вы делаете это в обработчиках событий, что может быть выполнено обязательно, если хотите, но это должно быть сделано без фактического изменения исходного состояния. например

// OK

let foo = this.state.foo;
foo = deriveSomeValue(foo);
this.setState({ foo });

// BAD

this.state.foo = deriveSomeValue(foo);
this.setState(this.state);

В первом примере (ОК), конечно, вы можете увидеть некоторый уровень примесей; foo изменено, но по крайней мере исходное состояние - нет.

Во втором примере (БАД) у нас тот же уровень примесей, но хуже; мы напрямую изменяем текущее состояние, что может привести к непредсказуемым результатам. Я вижу слишком много постов с переполнением стека, в которых люди спрашивают: "Почему вещи не отображаются правильно, когда я делаю Х this.state"Другими словами, эта парадигма неизменности применяется по прагматическим причинам; то есть, именно так React был спроектирован для работы, а любые другие способы приводят к неопределенному поведению (в каждом конкретном случае).

Еще один пример, который может привести к непредсказуемому результату:

const foo = this.state.foo;
foo.someProperty = getSomeValue();
this.setState({ foo });

Который, в этом случае, состояние все еще обновляется прежде, чем уведомить React. (Это связано с тем, что на объекты ссылаются явно, а не на то, что они неявно копируются.)

Конечно, вы можете перейти из состояния A в состояние B в React в императивном стиле внутри обработчиков событий, но вы должны убедиться, что исходное состояние не будет изменено напрямую. Если вы абсолютно точно понимаете, что должны быть какие-то сложные модификации, то я рекомендую вам выполнить глубокое копирование объекта, а затем выполнить необходимые изменения таким образом. Следующее совершенно нормально:

const foo = cloneObject(this.state.foo);
// `cloneObject` is an entirely contrived function. You'll have to pick a
// deep copying library. Google around for "JavaScript deep copying"
foo.someProperty = getSomeValue();
this.setState({ foo });

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

let foo = this.state.foo;
foo = foo.set('someProperty', getSomeValue());
this.setState({ foo });