День 11: Методы жизненного цикла в React

Учебник по React и JavaScript

День 11: Методы жизненного цикла в React

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

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

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

Методы жизненного цикла

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

Монтаж

Монтирование — это процесс создания элемента и вставки его в дерево DOM.

Следующие методы вызываются в следующем порядке, когда экземпляр компонента создается и вставляется в DOM.

А.) Конструктор ( ):

Конструктор компонента React вызывается до его монтирования. При реализации конструктора React. Подкласс компонента, вы должны называть super(props). Есть две цели использования конструктора React:

а. Инициализируйте локальное состояние, назначив объект this.state

например: this.state = {имя: 'Джон'}

б. Привязка методов обработчика событий к экземпляру

пример: this.handleClick = this.handleClick.bind(это)

Пример 1:

создать новый проект, день-11

$ create-react-app day-11
$ cd day-11
$ npm start

и добавьте следующий код в App.js

import './App.css';
import React, {Component} from 'react';
export default class App extends Component {
constructor(props){  
super(props);
console.log('App - Constructor Called')
console.log(this.props)
}
render() {
return <h1>Hey there!</h1>
}}

index.js

import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App name = "john"/>     //name is a prop, passing to our component
</React.StrictMode>,
document.getElementById('root')
);

В index.js мы передаем реквизит с именем name с сохраненным значением «john». Довольно простая программа React, и в App.js у нас есть конструктор, и мы передаем в него наше свойство name и регистрируем его на экране, чтобы мы могли его прочитать. Ничего фантастического. Но одну вещь вы, наверное, видели, что он напечатал «Приложение — вызов конструктора».

Прежде всего, вызывается конструктор, и он печатает «App-Constructor Called», а затем свойство «name: I am App Prop» печатается само по себе, прежде чем мы можем даже вызвать их. Все произошло под капотом.

B.) статический метод getDerivedStateFromProps ( )

getDerivedStateFromProps вызывается непосредственно перед вызовом метода рендеринга как при первоначальном монтировании, так и при последующих обновлениях. Он должен возвращать объект для обновления состояния или null, чтобы ничего не обновлять.

измените свой App.js на этот код:

import './App.css';
import React, {Component} from 'react';
import Student from './student';
export default class App extends Component {
constructor(props){
super(props);
console.log('App - Constructor Called')
console.log(this.props)
this.state = {
roll: '101'
}
}
static getDerivedStateFromProps(props, state){
console.log('App- Get Derived State From Prop')
return null
}
render() {
return (
<div>
<Student name="Dave"/>
</div>
)
}}

C.) визуализировать ( )

добавить в проект новый компонент Marks

Marks.js

import React, {Component} from 'react';
export default class Marks extends Component {
render() {
console.log("Marks [Child of Student] - Rendered")
return (
<h1>Marks Component </h1>
)
}}

Студент.js

import React, {Component} from 'react';
import Marks from './Marks';
export default class Student extends Component {
render() {
console.log("Student [Child of App] - Rendered")
return (
<div>
<h1>Hello, {this.props.name} </h1>
<Marks />
</div>
)}}

App.js останется прежним.

будет запущен метод render, сначала компонент Grandparent (App), затем компонент Parent (Student) и, наконец, дочерний компонент (Marks).

D.) компонентDidMount()

Это происходит сразу после монтирования компонента (вставки в дерево), после выполнения метода render(). Этот метод выполняется один раз в жизненном цикле компонента и после первого рендеринга. Здесь должны происходить запросы AJAX и DOM или обновление состояния. Этот метод также используется для интеграции с другой инфраструктурой JS и любыми функциями, которые задерживают выполнение, такими как setTimeout или setInterval.

Вызовы API всегда должны выполняться в методе componentDidMount.

Добавьте это в App.js

componentDidMount() {
console.log("App - componentDidMount- Mounted");
}

Вывод:

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

Фото автора Fotis Fotopoulos на Unsplash

День 11: Методы жизненного цикла в React

Учебник по React и JavaScript