Как да разберем методите на жизнения цикъл на компонента в ReactJS

В тази статия ще изследваме методите на жизнения цикъл на ReactJS. Но преди да преминем към различните методи на жизнения цикъл на React, трябва да разберем какво е това.

Както знаем, всичко на този свят следва един цикъл (да речем хората или дърветата). Ние се раждаме, растем и след това умираме. Почти всичко следва този цикъл в живота му, а компонентите на React също го правят. Компонентите се създават (монтират на DOM), растат чрез актуализиране и след това умират (демонтират се на DOM). Това се нарича жизнен цикъл на компонента.

Има различни методи на жизнения цикъл, които React предоставя на различни фази от живота на компонента. React автоматично извиква отговорния метод според фазата, в която се намира компонентът. Тези методи ни дават по-добър контрол върху нашия компонент и ние можем да ги манипулираме, използвайки тези методи.

Понастоящем знаем какво представляват методите на жизнения цикъл и защо те са важни. И така, какви са тези различни методи? Нека да ги разгледаме.

Методи на жизнения цикъл

Жизненият цикъл на компонента е класифициран най-общо на четири части:

  • инициализация
  • монтаж
  • актуализиране и
  • демонтиране .

Нека обсъдим различните методи на жизнения цикъл, които са на разположение на тези различни фази (т.е. инициализация, монтиране, актуализиране и демонтиране).

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

Това е фазата, в която компонентът ще започне своето пътуване чрез настройване на състоянието (виж по-долу) и подпорите. Това обикновено се прави вътре в метода на конструктора (вижте по-долу, за да разберете по-добре фазата на инициализация).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Монтаж

Името се обяснява само по себе си. Монтирането е фазата, в която нашият React компонент се монтира на DOM (т.е. се създава и вмъква в DOM).

Тази фаза излиза на сцената след приключване на фазата на инициализация. В тази фаза нашият компонент се изобразява за първи път. Наличните на този етап методи са:

1. компонентWillMount ()

Този метод се извиква непосредствено преди компонентът да се монтира в DOM или да се извика методът за рендиране. След този метод компонентът се монтира.

Забележка: Не трябва да правите API извиквания или каквито и да е промени в данните, използвайки this.setstate в този метод, защото той се извиква преди метода на рендиране. Така че нищо не може да се направи с DOM (т.е. актуализиране на данните с API отговор), тъй като той не е монтиран. Следователно не можем да актуализираме състоянието с отговора на API.

2. componentDidMount ()

Този метод се извиква, след като компонентът се монтира на DOM. Подобно на компонентWillMount, той се извиква веднъж в жизнения цикъл. Преди изпълнението на този метод се извиква методът за рендиране (т.е. имаме достъп до DOM). Можем да правим API извиквания и да актуализираме състоянието с API отговора.

Погледнете, за да разберете тези методи за монтаж:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Актуализиране

Това е третата фаза, през която преминава нашият компонент. След фазата на монтиране, където компонентът е създаден, фазата на актуализация излиза на сцената. Това е мястото, където състоянието на компонента се променя и следователно се извършва повторно изобразяване.

В тази фаза данните на компонента (състояние и подпори) се актуализират в отговор на потребителски събития като щракване, въвеждане и т.н. Това води до повторно изобразяване на компонента. Наличните на този етап методи са:

  1. shouldComponentUpdate ()

Този метод определя дали компонентът трябва да се актуализира или не. По подразбиране връща true. Но в даден момент, ако искате да изобразите отново компонента при някакво условие, тогава методът shouldComponentUpdate е точното място.

Да предположим например, че искате да рендерирате компонента си само когато има промяна в проп - тогава използвайте силата на този метод. Той получава аргументи като nextProps и nextState, които ни помагат да решим дали да изобразяваме повторно, като правим сравнение с текущата стойност на стойността.

2. компонентWillUpdate ()

Подобно на други методи, името му също е обяснимо. Извиква се преди повторното изобразяване на компонента. Извиква се веднъж след метода ' shouldComponentUpdate '. Ако искате да извършите някакво изчисление преди повторно изобразяване на компонента и след актуализиране на състоянието и проп, тогава това е най-доброто място да го направите. Подобно на метода 'shouldComponentUpdate', той също получава аргументи като nextProps и nextState.

3. ComponentDidUpdate ()

Този метод се извиква непосредствено след повторното изобразяване на компонента. След като новият (актуализиран) компонент се актуализира в DOM, се изпълнява методът " componentDidUpdate ". Този метод получава аргументи като prevProps и prevState.

Погледнете, за да разберете по-добре методите за актуализиране:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Демонтиране

Това е последната фаза в жизнения цикъл на компонента. Както подсказва името, компонентът се демонтира от DOM на тази фаза. Методът, който се предлага на тази фаза, е:

1. компонентWillUnmount ()

Този метод се извиква преди демонтирането на компонента. Преди премахването на компонента от DOM се изпълнява „ componentWillUnMount“ . Този метод обозначава края на жизнения цикъл на компонента.

Ето представяне на блок-схема на методите на жизнения цикъл:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!