разница между ... this.state и this.state

Question

В своем приложении реагирования я передаю состояние родителя ребенку как опору:

<Child parentsState={...this.state} />

, и это работает. но потом я подумал, почему бы мне не передать this.state без синтаксиса спреда, и я сделал:

<Child parentsState={this.state}  

, и это тоже сработало. В основном я использую синтаксис распространения с массивами, и я не знаю, есть ли разница между объектом без синтаксиса распространения и без него?

Спасибо!

Answer 1

Прежде всего, ничего не стоит, что передача всего состояния компоненту в виде prop (s) является антипаттерном. Это приводит к тому, что Child зависит от структуры состояния родителя, и каждый раз, когда вы меняете родителя, вам также нужно будет сменить Child. Также изнутри Child не ясно, какие реквизиты вы получаете, и вам всегда нужно будет переходить к исходному коду родителя, чтобы узнать

По вашему вопросу: оба случая одинаковы, за исключением того, что в первом примере вы создаете new объект из this.state, который выглядит точно так же, как состояние, но это все еще совершенно новый объект, в то время как во втором случае вы передаете сам объект состояния

Также обратите внимание на ошибку, <Child parentsState={...this.state} />не скомпилируется, но <Child parentsState={{...this.state}} /> будет

Answer 2

Предполагая, что ваш первый это (с {{ и }}):

<Child parentsState={{...this.state}} />

разница между этим и

<Child parentsState={this.state} />

заключается в том, что в первомсоздается поверхностная копия из this.state, и эта копия передается Child, но во втором this.state передается Child напрямую.

Втораяозначает, что код в Child может напрямую изменять this.state, что является плохой вещью ™. :-) (Первое также может означать, что, если this.state содержит свойства, которые ссылаются на объекты или массивы.)

Они оба , вероятно, то, чего вы хотите избежать, по крайней мереесли this.state имеет какие-либо свойства, относящиеся к объектам (в этом случае первое не так уж плохо).

Answer 3

Разница между обычным объектом и распространяющимся объектом может быть определена как: -

var obj = {name: 'stackoverflow'}

1. var obj1 = {. ..obj}

   Вывод будет в виде

   obj1 = {имя: 'stackoverflow'}

2. var obj2 = {obj}

   Вывод будет выглядеть как

   obj1 = {obj: {name: 'stackoverflow'}}