Жизненный цикл компонента React: что вам нужно знать [2022]
Опубликовано: 2021-01-06В React приложение разделено на мельчайшие части, известные как компоненты. Компоненты могут быть презентационными или контейнерными.
Когда мы говорим о презентационных компонентах, в них нет никакой логики. Они встроены внутрь компонентов; у него есть только пользовательский интерфейс.
Компоненты-контейнеры — это те, которые используют презентационные компоненты и имеют бизнес-логику в компоненте. Таким компонентам часто приходится поддерживать локальные объекты состояния для достижения одного из многих вариантов использования, за которые они могут нести ответственность. Эти компоненты используют презентационные компоненты в качестве дочерних компонентов и передают данные с помощью различных реквизитов.
React позволяет вам иметь либо классовые, либо функциональные компоненты. Преобладающий шаблон, используемый в экосистеме реагирования, заключается в том, что презентационный компонент является компонентом функционального типа, а компоненты-контейнеры — типом класса.
Жизненный цикл реакции показывает точный процесс, через который проходят компоненты, и причину жизненного цикла компонента реакции .
Оглавление
Функциональные компоненты
Это те, у которых нет состояния, и выполняются только манипуляции с использованием реквизита.
Все методы жизненного цикла компонентов или setState не могут быть использованы или доступны внутри таких компонентов.
Оформить заказ: идеи проекта React
Компоненты класса
Эти компоненты могут иметь локальное состояние, и у них есть доступ к методам жизненного цикла и setState .
Типичный компонент класса в реакции выглядит так: 
Жизненный цикл компонента состоит из трех фаз:
- Монтаж
- Обновление
- Размонтирование
Монтаж
Когда любой компонент создается и вставляется в DOM (объектная модель документа), используются следующие методы:
● конструктор()
● статическая функция getDerivedStateFromProps()
● рендер()
● компонентDidMount()
Обновление
Когда свойство или состояние, предоставленное компоненту, изменяется, повторная визуализация компонента также называется фазой обновления. На этом этапе ниже приведены следующие вызываемые методы жизненного цикла:
● статическая функция getDerivedStateFromProps()
● долженОбновитьКомпонент()
● рендер()
● getSnapshotBeforeUpdate()
● компонентDidUpdate()
Читайте: Vue vs React: разница между Vue и React
Размонтирование
Этот метод вызывается во время размонтирования любого компонента:
● компонент willUnmount()
Это последняя функция, которая вызывается перед уничтожением объектной модели документа. Он работает как очистка любого элемента, созданного во время componentWillMount.
Для обработки ошибок в компоненте зарезервировано несколько методов: -
● статическая функция getDerivedStateFromError()
● компонентDidCatch()
Подробно описаны часто используемые методы жизненного цикла:
● конструктор (реквизит)
Этот метод жизненного цикла используется на этапе монтажа компонентов. Здесь может быть объявлен локальный объект состояния. Super(props) вызывается внутри конструктора перед любым другим оператором; в противном случае возникает ошибка при доступе к this.props.
Если не планируется объявлять локальный объект состояния или привязывать обработчик событий к экземпляру, нет необходимости писать метод жизненного цикла компонентов.
Состояние вызова в конструкторе() не рекомендуется, так как оно вызовет повторный рендеринг до завершения предыдущего цикла.
Constructor() — это единственное место, где можно напрямую назначить состояние. В противном случае, если есть необходимость изменить состояние или присвоить что-то внутри него, следует использовать this.setSate .
● рендер()
Внутри компонентов этого метода написана часть JSX. JSX похож на HTML, но представляет собой расширенный синтаксис javascript. Когда мы используем JSX, мы также можем использовать выражения Javascript внутри метода рендеринга.
Метод render() любого родительского компонента может иметь внутри себя дочерние компоненты. Все следует шаблону композиции, который является основой реактивных компонентов.
Всякий раз, когда вызывается родительский метод рендеринга, рендеринг начинается и для дочерних компонентов, а родительский рендеринг завершается только после завершения рендеринга всего дочернего элемента.
Метод рендеринга является обязательным; без этого компонент не может быть создан, так как это единственное место, где может быть записана часть представления компонента.
Метод рендеринга чистый; это означает, что он не может изменить состояние внутри себя.
Для любого компонента, находящегося на этапе обновления, повторный рендеринг для конкретного компонента может произойти или нет, может зависеть от типа или использования возвращаемого метода жизненного цикла shouldComponentUpdate() .
Вызовы API и любое взаимодействие с браузером внутри этого метода не рекомендуется, и это вызовет ошибку.
● компонентDidMount()
Этот метод вызывается сразу после монтирования компонента. Теперь DOM доступен для дальнейших манипуляций. Внутри этого метода можно вызвать setState .
Кроме того, отсюда можно осуществлять взаимодействие с вызовами браузера или API.
Этот метод вызывается только один раз во время создания. Метод не будет выполняться ни в какой дальнейшей части повторного рендеринга, и логика внутри него также не будет выполняться.
● компонентDidUpdate()
Это то же самое, что и componentDidMount.; можно получить ошибку с той лишь разницей, что это вызывается только тогда, когда происходит повторный рендеринг компонента. Этот метод не вызывается для начального рендеринга.
setState и побочные эффекты могут быть выполнены внутри этого метода. Но setState нужно обернуть условием; в противном случае можно попасть в бесконечный цикл рендеринга, и рендеринг никогда не закончится.
Также componentDidUpdate не будет вызываться, если shouldComponentUpdate() возвращает false.
● компонентWillUnmount()
Этот метод вызывается, когда происходит размонтирование компонента.
Внутри метода в идеале можно добиться удаления обработчиков событий и очистки памяти.
Функцию setState() не следует вызывать внутри этого, так как это вызывает повторную визуализацию компонента.
● долженОбновитьКомпонент()
При разработке реагирующих приложений часто бывают случаи, когда нужно избегать ненужного повторного рендеринга компонентов. Для достижения этого компонента в классе есть метод, упомянутый выше. Если этот метод возвращает false, то повторного рендеринга компонента и его дочерних компонентов не произойдет.
Предыдущие реквизиты можно проверить и сравнить с новыми предоставленными реквизитами, чтобы убедиться в отсутствии изменений, а затем вернуть false.
Вызов метода setState() внутри этого не рекомендуется, так как это вызовет повторный рендеринг.
Также не следует проводить побочные эффекты внутри этого метода.
Есть и другая альтернатива этому методу. Можно использовать React.pureComponents при расширении класса. Это намного стабильнее и надежнее, чем shouldComponentUpdate().
И последнее, но не менее важное: существуют реагирующие компоненты типа границ ошибок, которые присутствуют для обнаружения ошибок.
Нужно просто обернуть компонент компонентом границы ошибки.
Внутри этого специального компонента используются два метода жизненного цикла:
- статический getDerivedStateFromError()
- компонентДидКэтч()
Оба они вызываются, если какой-либо компонент-потомок выдает ошибку.
Первый вызывается на этапе рендеринга, поэтому внутри него не допускаются никакие побочные эффекты. Второй вызывается на этапе фиксации, поэтому внутри него разрешены побочные эффекты.
Читайте также: Зарплата разработчиков ReactJS в Индии
Изучайте онлайн -курсы по разработке программного обеспечения в лучших университетах мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.
Заключение
Жизненный цикл компонента реакции усложняет код, но систематическое выполнение и манипуляции, выполняемые с помощью методов, кажутся весьма привлекательными с точки зрения разработчика. Жизненный цикл React позволяет реструктурировать компоненты или манипулировать ими.
Если вам интересно узнать больше о React, разработке полного стека, ознакомьтесь с программой Executive PG upGrad и IIIT-B в разработке программного обеспечения с полным стеком, которая предназначена для работающих профессионалов и предлагает более 500 часов интенсивного обучения, 9+ проектов. и задания, статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.
