Реактивный жизненный цикл - Различные фазы жизненного цикла React с примерами

Введение в жизненный цикл React

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

Фазы жизненного цикла реакции

Жизненный цикл компонентов определяется как последовательность методов, вызываемых на разных этапах компонента. Ниже приведены различные фазы, участвующие в жизненном цикле реагирующего компонента:

1. Инициализация

На этом этапе от разработчика требуется определить свойства и начальное состояние компонента. Это делается в конструкторе компонента. Следующий код показывает фазу инициализации реагирующего компонента:

Код:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Монтаж

Монтаж - это фаза жизненного цикла реакции, которая наступает после завершения инициализации. Монтирование происходит, когда компонент размещается в контейнере DOM, а компонент отображается на веб-странице. Фаза монтажа имеет два метода:

• compnentWillMount () : этот метод вызывается непосредственно перед размещением компонента в DOM, то есть эта функция вызывается непосредственно перед тем, как функция рендеринга будет выполнена в первый раз.
• componentDidMount () : этот метод вызывается сразу после помещения компонента в DOM, то есть эта функция вызывается сразу после выполнения функции рендеринга. В первый раз.

Из названных выше двух методов мы поняли значение ключевых слов «Воля» и «Сделал». Теперь ясно, что «Воля» используется для до определенного события, а «сделал» используется в случае после определенного события.

3. Обновление

Обновление - это фаза, на которой состояние и свойства, заполненные во время инициализации, изменяются при необходимости после некоторых пользовательских событий. Ниже перечислены различные функции, вызываемые на этапе обновления:

• componentWillReceiveProps (): эта функция не зависит от состояния компонента. Этот метод вызывается до того, как компонент, смонтированный в DOM, переназначается. Функция принимает новые реквизиты, которые могут быть идентичными или отличаться от оригинальных реквизитов. В основном на этом этапе можно применить некоторые проверки перед рендерингом.
• shouldComponentUpdate (): Иногда желательно не показывать новые реквизиты на странице вывода. Чтобы достичь этого, этот метод возвращает false, что означает, что вновь отображенные реквизиты не должны отображаться на странице вывода.
• componentWillUpdate (): эта функция вызывается до повторного рендеринга компонента, то есть этот метод вызывается один раз перед выполнением функции рендеринга после обновления.
• componentDidUpdate (): эта функция вызывается после повторного рендеринга компонента, то есть этот метод вызывается один раз после выполнения функции рендеринга после обновления.

4. Размонтирование

Это последний этап в жизненном цикле компонента, и на этом этапе компонент отсоединяется от контейнера DOM . Следующий метод подпадает под эту фазу.

• componentWillUnmount (): эта функция вызывается до окончательного отсоединения компонента от контейнера DOM, то есть этот метод вызывается, когда компонент полностью удаляется со страницы, и это показывает конец его жизненного цикла.

Пример жизненного цикла React

Здесь мы увидим несколько примеров кода, показывающих жизненный цикл реагирующего компонента.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Когда вышеприведенная программа выполняется изначально, она покажет приведенный ниже вывод на веб-странице.

При щелчке по области Click Here текст изменится на следующий:

Теперь на консоли вы можете увидеть последовательность вызываемых методов, консоль покажет нижеприведенный вывод:

После нажатия на экран будет произведен повторный рендеринг, и в консоли отобразится следующее:

Приведенный выше вывод консоли дает четкое представление о методах жизненного цикла реагирования, вызываемых в течение жизненного цикла компонента реакции.

Вывод

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

Рекомендуемые статьи

Это руководство по жизненному циклу React. Здесь мы обсуждаем фазы жизненного цикла реагирования, такие как инициализация, монтирование, обновление и размонтирование вместе с примером. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

1. Реагировать родной против реагировать
2. Agile Lifecycle
3. ITIL Lifecycle
4. Инструменты развертывания Java
5. Руководство по кнопке в React Native