изучите жизненный цикл React раз и навсегда
в этой статье мы собираемся понять значение всего жизненного цикла, изучить все его методы и углубиться в него.
В чем смысл жизненного цикла?
давайте начнем этот пример с вас,
вы живете в цикле, который является тем же жизненным циклом, о котором мы говорим .
до вашего рождения, возможно, ваше имя, выбранная вами религия, имя ваших родителей и многое другое (инициализация), на следующем этапе вы рождаетесь (восхождение), следующий этап - взросление и изменение (обновление) и последний Фаза заканчивается смертью (размонтирование).
это был наглядный пример жизненного цикла и его фаз, который одинаков во всех жизненных циклах, независимо от того, является ли он животным, человеком, растением или компонентом React.
теперь давайте объясним эти фазы в реагирующих компонентах.
инициализация :
на этом этапе мы инициализируем все состояния и реквизиты для компонента (так же, как мы выбираем имя и другие вещи для ребенка, который должен родиться).
2.монтаж :
на этом этапе выполняется рендеринг и монтируется компонент (точно так же, как рождается ребенок).
3.обновление :
на этом этапе реквизиты и состояния оказывают прямое влияние на компонент, что приводит к его обновлению. но как?!
если я брошу тебе камень в лицо, что будет?!
потому что ваше лицо не было повреждено , оно теперь , таким образом, вы изменились, и это называется обновлением.
Теперь, если я брошу тот же камень с той же силой в ту же часть твоего лица, это ничего не изменит в тебе, потому что у тебя уже есть эта рана.
в последний раз, если я брошу еще один камень тебе в лицо, но на этот раз форма камня будет другой, а сила больше, чем в прошлый раз, это повредит твоему лицу больше, чем в прошлый раз, и ты снова изменишься, потому что камень изменился. ( надеюсь не убью вас до конца статьи😂 ).
теперь, если мы посмотрим на это таким образом, что вы являетесь компонентом, а камень — это свойство, брошенное в компонент, вы можете догадаться, как изменяется компонент (каждый раз, когда свойство или состояние изменяются, компонент должен обновляться, а в противном случае — нет).
4. Размонтирование :
на этом этапе компоненты заканчиваются и удаляются с экрана.
вы можете догадаться на примере этого в реальной жизни.
Каковы методы этих фаз и как они работают?
- в инициализации не так много вещей, кроме конструктора и super и setState
2.монтаж :
КомпонентВиллМаунт()
этот метод вызывается непосредственно перед начальным рендерингом, и все
внимание: этот метод устарел с 2018 года, и вы можете использовать его в версиях до 17, а после этого вы можете использовать этот метод с UNSAFE_componentWillMount
(что не рекомендуется) или альтернативы, о которых я расскажу через секунду
но почему устарели? : react понял, что если мы хотим делать асинхронные вещи, такие как выборка данных в этом методе, это вызовет проблему между этим методом и методом рендеринга, и если вы читали мою последнюю статью об асинхронной обработке js
Вы можете догадаться, почему это происходит…
потому что componentWillmount должен выполняться первым, а затем рендериться, но метод рендеринга также должен выполняться до асинхронной функции внутри componentWillMount, и это проблема, верно?
теперь, какие есть альтернативы для него? :
componentDidMount() - хорошая альтернатива для асинхронного, а для синхронного конструктора должно быть хорошо.
компонентDidMount()
этот метод вызывается сразу после первоначального рендеринга, и все (когда я говорю «рендеринг», я имею в виду, что компонент отображается на экране).
в этом методе вы можете делать асинхронные вещи, такие как выборка данных, как я упоминал выше.
эти два метода являются лишь основными методами этой фазы.
3.обновление:
этот метод вызывается перед повторным рендерингом (когда его состояния или реквизиты изменяются) и не выполняется при начальном рендеринге.
Вы помните, когда я говорил о том, чтобы кинуть вам камень в лицо за обновление примера (как вы можете забыть😂), в любом случае, в этом примере что-то отличается от компонента реакции, а именно:
если мы дадим тот же реквизит компоненту, он будет снова перерендерен! ты знаешь почему?
поскольку shouldComponentUpdate() возвращает true по умолчанию каждый раз, когда компонент получает реквизит, не имеет значения, не изменился ли реквизит вообще.
но когда мы возвращаем (newProps.value !== this.props.value) внутри этого метода, он не будет давать нам true каждый раз, а компонент будет просто перерисовываться каждый раз при изменении реквизита.
внимание: если он возвращает false, функции render() и componentDidUpdate() и componentWillUpdate() не будут выполнены.
компонентВиллудате()
этот метод вызывается перед повторным рендерингом, после shouldComponentMount (когда его состояния или пропсы изменяются) и не выполняется при начальном рендеринге.
внутри этого метода вы можете манипулировать текущим компонентом до его обновления или считывать информацию из DOM, например позицию прокрутки.
внимание: этот метод устарел после выпуска версии 16.6, и вы можете использовать UNSAFE_componentWillUpdate (что не рекомендуется) или альтернативы, о которых я расскажу через секунду.
но почему этот метод устарел ? :
после версии 16.6 в React появились новые вещи, одна из которых была приостановка, которая делает метод рендеринга компонента асинхронным! и это называется ленивым компонентом, и это хорошо для производительности, но…
преобразование синхронного метода рендеринга в асинхронный вызывает задержку, а задержка вызывает проблему с componentWillUpdate.
каковы его альтернативы?
componentDidUpdate() и getSnapshotBeforeUpdate() — это альтернативы, о которых мы поговорим.
получитьSnapshotBeforeUpdate()
этот метод вызывается прямо перед самым последним рендерингом.
в этом методе мы можем получить и вернуть некоторую информацию из DOM, например, позицию прокрутки, прежде чем она будет изменена, и возвращаемое значение будет передано в componentDidUpdate() в качестве параметра.
компонентDidUpdate()
этот метод вызывается сразу после каждого повторного рендеринга.
как видите, третий параметр — это возвращаемое значение из getSnapshotBeforeUpdate().
4. Размонтирование
это единственный основной метод для этой фазы, который вызывается непосредственно перед размонтированием компонента и его удалением с экрана.
этим методом вы можете выполнять любые действия по очистке, такие как аннулирование таймеров, отмена сетевых запросов и т. д.
давайте посмотрим на блок-схему методов жизненного цикла, чтобы закончить эту статью.
вот и все мой друг, теперь ты можешь отдыхать без камня на лице.😁
Я надеюсь, что вы узнали что-то из этой статьи, хотя с функциональными компонентами и хуками мы редко используем методы жизненного цикла в настоящее время, и я расскажу о них в будущем.
пока и удачи. 🤞
