React lifecycle

Жизнен цикъл на компонентите

Всеки компонент в React има жизнен цикъл, който можете да наблюдавате и манипулирате по време на трите му основни фази.

Трите фази са: Монтиране , Актуализиране и Демонтиране .


Монтаж

Монтирането означава поставянеjf на елементи в DOM.

React има четири вградени метода, които се извикват в този ред при монтиране на компонент:

  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

В render() метода се изисква и винаги ще се извиква, а другите са по избор и се извикват само ако ги дефинираме.


constructor

constructor() метода се извиква преди всичко друго, когато се инициира компонента, и това е най-естественото място да се създаде state и други първоначални стойности.

В constructor() метода се извикват props, като аргументи, и винаги трябва да се започне, като се извиква super(props). Преди всичко друго, това ще открие метод конструктор на родителите и позволява на компонента да наследи методи от своята майка ( React.Component).

Пример:

В constructor метод се извиква като реагира, всеки път, когато правите компонент:

Пример за изпълнение »


getDerivedStateFromProps

getDerivedStateFromProps() метода се извиква точно преди оказване на елемента (и) в DOM.

Това е естественото място за задаване на state обект въз основа на първоначалните props.

Това се приема state като аргумент и връща обект с промени в state.

Примерът по-долу започва с любимия цвят като „червен“, но getDerivedStateFromProps() методът актуализира любимия цвят въз основа на favcol атрибута:

Пример:

В getDerivedStateFromProps метода се извиква точно преди да създаде метода:

Пример за изпълнение »


Визуализиране

render() е необходим метод, и е метод, който всъщност извежда HTML към DOM.

Пример:

Прост компонент с прост render() метод:

Пример за изпълнение »


componentDidMount

componentDidMount() метода се извиква след компонент и е вече изобразен.

Тук стартирате изрази, които изискват компонентът да е вече поставен в DOM.

Пример:

Отначало любимият ми цвят е червен, но ми дайте втори и вместо това нека да е жълт:

Пример за изпълнение »


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

Следващата фаза в жизнения цикъл е, когато компонентът се актуализира .

Компонентът се актуализира винаги, когато има промяна в някой от компонентите state или props.

React има пет вградени метода, които се извикват в този ред при актуализиране на компонент:

  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()

render() метода се изисква и винаги ще се извиква, а другите са по избор и се извикват ако ги дефинираме.


getDerivedStateFromProps

Също така на актуализации на getDerivedStateFromProps метода се извиква. Това е първият метод, който се извиква, когато даден компонент се актуализира.

Това все още е естественото място за задаване на state обекта въз основа на първоначалните props.

Примерът по-долу има бутон, който променя любимия цвят на син, но тъй като getDerivedStateFromProps() методът е извикан, който актуализира състоянието с цвета от атрибута favcol, любимият цвят все още се изобразява като жълт:

Пример:

Ако компонентът се актуализира, getDerivedStateFromProps() методът се извиква:

Пример за изпълнение »


shouldComponentUpdate

С shouldComponentUpdate() метода можете да върнете булева стойност, която указва дали React трябва да продължи с изобразяването или не.

Стойността по подразбиране е true.

Примерът по-долу показва какво се случва, когато shouldComponentUpdate() методът върне false:

Пример:

Спиране на изобразяването на компонента при всяка актуализация:

Пример за изпълнение »

Пример:

Същият пример като по-горе, но този път shouldComponentUpdate() методът връща true:

Пример за изпълнение »


Визуализиране

render() метода, разбира се се извиква, когато един компонент получава актуализирана информация, и той трябва отново да обнови HTML към DOM, с новите промени.

Примерът по-долу има бутон, който променя любимия цвят на син:

Пример:

Щракнете върху бутона, за да направите промяна в състоянието на компонента:

Пример за изпълнение »


getSnapshotBeforeUpdate

С getSnapshotBeforeUpdate() метода имате достъп до props и state преди актуализацията, което означава, че дори след актуализацията можете да проверите какви са били стойностите преди актуализацията.

Ако getSnapshotBeforeUpdate() методът е наличен, трябва да включите и componentDidUpdate() метода, в противен случай ще получите грешка.

Примерът по-долу може да изглежда сложен, но всичко, което прави, е следното:

Когато компонентът се монтира, той се изобразява с любимия цвят „червен“.

Когато компонентът е монтиран, таймерът променя състоянието и след една секунда любимият цвят става „жълт“.

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

След това componentDidUpdate() методът се изпълнява и записва съобщение в празния елемент DIV2:

Пример:

Използвайте getSnapshotBeforeUpdate() метода, за да разберете как е state изглеждал обектът преди актуализацията:

Пример за изпълнение »


componentDidUpdate

componentDidUpdate метода се извиква след като компонента се актуализира в DOM.

Примерът по-долу може да изглежда сложен, но всичко, което прави, е следното:

Когато компонентът се монтира, той се изобразява с любимия цвят „червен“.

Когато компонентът е монтиран, таймерът променя състоянието и цветът става „жълт“.

Това действие задейства фазата на актуализация и тъй като този компонент има componentDidUpdate метод, този метод се изпълнява и записва съобщение в празния DIV елемент:

Пример:

componentDidUpdate метода се извиква след актуализацията и положен трудът в DOM:

Пример за изпълнение »


Демонтиране

Следващата фаза в жизнения цикъл е когато компонентът се премахне от DOM или се демонтира, както React обича да го нарича.

React има само един вграден метод, който се извиква, когато компонентът е демонтиран:

  • componentWillUnmount()

componentWillUnmount

componentWillUnmount метода се извиква когато компонентът е на път да бъде отстранен от DOM.

Пример:

Щракнете върху бутона, за да изтриете заглавката:

Пример за изпълнение »