Реагирующие реквизиты inmmutable vs Реквизиты изменений в жизненном цикле REACT

Question

Я прочитал много документации о REACT JS, и я нашел в нескольких сайтах, что .props должен быть непреодолимым ... Если это так, то почему в жизненном цикле компонентов React есть некоторые функции, которые срабатывают при изменении реквизита?

http://busypeoples.github.io/post/react-component-lifecycle/

Может кто-нибудь помочь мне понять, почему?

Answer 1

его разрешено менять опоры и имеет смысл во многих случаях. неизменность не означает, что вам не разрешено менять опору.

неизменность в этом контексте означает, что вы должны использовать https://facebook.github.io/immutable-js/docs/#/, когда у вас есть глубокие объекты, которые будут переданы в качестве реквизита. из-за причины u может изменить prop, но ссылка lib, на которую ссылается, гарантирует, что u всегда получает полный новый объект каждый раз, когда вы меняете someting (потому что оригинал неизменен;)).

Причина, по которой вы должны использовать совершенно новый объект, когда изменения проректора так реагируют, фактически понимает, что пропозиция была изменена, потому что она внутренне не делает глубокого сравнения, а просто сравнивает ссылку на объект. поэтому неизменяемые объекты в качестве реквизита - единственный способ убедиться, что изменения ур будут распространяться через дерево компонентов ur, когда вы вносите глубокие изменения в ур переданных объектов/реквизитов.

Answer 2

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

Re: Жизненный цикл React, , вы, вероятно, думаете о componentWillReceiveProps, который вызывается, когда ваш родитель визуализирует. Он срабатывает, когда новый реквизит передается в существующий компонент. Они будут иметь те же имена, что и существующие реквизиты, и они могут иметь или не иметь новых значений. Вы можете действовать в своем локальном состоянии на основе того, когда появляются новые реквизиты. Вы можете использовать его или игнорировать, в зависимости от ваших потребностей.

Answer 3

Для реакции, immutablity означает более или менее:

После того, как вы прошли объект среагировать в качестве реквизита или в состоянии, вы никогда не должны изменить тот же объект. Сделайте копию в новый объект и измените копию.

Реакт не имеет методов жизненного цикла, вызванных «изменением реквизита». Функции жизненного цикла React будут выполняться всякий раз, когда более высокий компонент переходит в новый набор реквизитов. Даже если новые реквизиты совпадают с старыми реквизитами, реакция будет по-прежнему работать на всех его жизненных циклах.

Есть 2 причины, почему неизменность важна:

1. Всякий раз, когда вы определяете новые подпорки, реагирует сравнивает новый реквизит со старым реквизитом, и решает, нужно ли обновить DOM. Если они совпадают, реакция не будет обновлять DOM (даже если все жизненные циклы выполнялись).
2. Иногда вам нужен собственный код для сравнения новых реквизитов со старыми реквизитами (например, для изменения цвета или любого другого). Некоторые методы жизненного цикла предоставляют вам доступ к новым и старым реквизитам.Чтобы ваш код был надежным, вы должны убедиться, что реквизит не изменится после того, как вы передадите им ответ.

Упрощенный пример, когда дела идут прямо:

oldUser = { name: "Bill" }       // points to object with name Bill 
<Component user={oldUser}/> 
newUser = Object.assign(oldUser, { name: "Dave" }) // new object 
<Component user={newUser}/> 

// newUser != oldUser (different objects): 
// react will run render function + update DOM 

пример, где дела идут плохо:

oldUser = { name: "Bill" } // points to object with name Bill 
<Component user={oldUser}/> 
newUser = oldUser   // newUser points to the same object as oldUser 
newUser.name = "Dave"  // Now also oldUser.name == "Dave" 
<Component user={newUser}/> 

// newUser == oldUser (same objects + both have name "Dave"): 
// react will run render function, but will NOT update DOM