React реквизиты неизменные против изменений реквизита в жизненном цикле REACT

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

У React нет методов жизненного цикла, которые запускаются "изменением реквизита". Функции жизненного цикла React будут запускаться всякий раз, когда вышестоящий компонент передает новый набор реквизитов. Даже если новые реквизиты совпадают со старыми реквизитами, реагирование все равно будет запускать все его методы жизненного цикла.

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

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

Answer 3

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

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

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