Автор оригинала: Anchal Nigam.
В этой статье мы собираемся исследовать методы жизненного цикла ReactJS. Но, прежде чем двигаться вперед, чтобы реагировать на разные методы жизненного цикла, мы должны понимать, что это такое.
Как мы знаем, все в этом мире следует за циклом (скажем, людей или деревья). Мы рождены, расти, а потом умираем. Почти все следует за этим циклом в его жизни, и реагируют компоненты также. Компоненты создаются (установлены на DOM), растут путем обновления, а затем умереть (размонтировать на DOM). Это называется компонентный жизненный цикл.
Существуют различные методы жизненного цикла, которые реагируют на разных фазах жизни компонента. Реагирование автоматически вызывает ответственный способ в соответствии с фазой, в котором компонент. Эти методы дают нам лучший контроль над нашим компонентом, и мы можем манипулировать им, используя эти методы.
В настоящее время мы знаем, какие методы жизненного цикла есть и почему они важны. Так каковы эти разные методы? Давайте посмотрим на них.
Методы жизненного цикла
Жизненный цикл компонента широко классифицируется на четыре части:
- Инициализация
- монтаж
- Обновление и
- Размонтирование Отказ
Давайте обсудим различные методы жизненного цикла, которые доступны на этих различных этапах (I.E., инициализация, монтаж, обновление и размонтирование).
Инициализация
Это этап, в которой компонент собирается начать свое путешествие, настроив состояние (см. Ниже) и реквизиты. Это обычно делается внутри метода конструктора (см. Ниже, чтобы лучше понять фазу инициализации).
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
};
}Монтаж
Название самоуверенно. Монтаж – это фаза, в которой наши регулировки реагирования устанавливаются на DOM (I.E., создается и вставлены в DOM).
Эта фаза наступает на сцену после завершения фазы инициализации. На этом этапе наша компонент делает первый раз. Методы, которые доступны на этом этапе:
1. ComponentWillmount ()
Этот метод называется непосредственно перед компонентными креплениями на DOM или метод рендеринга. После этого метода компонент устанавливается.
Примечание. Вы не должны делать вызовы API или какие-либо изменения данных, используя этот метод. SetsState в этом методе, потому что он вызывается перед методом Render. Таким образом, ничто не может быть сделано с DOM (то есть обновление данных с ответом API), так как он не был установлен. Следовательно, мы не можем обновить состояние с ответом API.
2. ComponentDidMount ()
Этот метод вызывается после того, как компонент устанавливается на DOM. Как ComponentWillMount, он называется один раз в жизненном цикле. Перед выполнением этого метода вызывается метод визуализации (I.E., мы можем получить доступ к 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!
);
}
}Обновление
Это третий этап, через которую проходит наш компонент. После фазы монтажа, когда компонент был создан, этап обновления входит в сцену. Это то, где государственные изменения компонента и, следовательно, происходит повторное рендеринг.
На этом этапе данные обновлений компонента (штата и реквизиты) в ответ на пользовательские события, такие как щелкающие, набрав и так далее. Это приводит к повторному рендеру компонента. Методы, которые доступны на этом этапе:
- целесообразно ()
Этот метод определяет, следует ли обновлять компонент или нет. По умолчанию он возвращает true. Но в какой-то момент, если вы хотите повторно отобразить компонент на некоторое условие, то должен соответствовать Метод должен правильное место.
Предположим, например, вы хотите перенаправить только ваш компонент, когда есть изменение в опоре – затем используйте мощность этого метода. Он получает аргументы, такие как NextProops и NextState, которые помогают нам решить, следует ли переназначить, выполняя сравнение с текущей ценностью SP.
2. ComponentWillUpdate ()
Как и другие методы, его название также является самоуверенностью. Это вызывается до того, как произойдет повторное рендеринг компонента. Это называется один раз после « должен быть необходим «Метод. Если вы хотите выполнить некоторые расчеты перед повторным рендером компонента и после обновления состояния и опоры, то это лучшее место для этого. Как метод «SOCCOMPONENTUPDATE», он также получает аргументы, такие как NextProops и 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('https://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. ComponentWillunMount ()
Этот метод вызывается до того, как проходит размонтирование компонента. Перед удалением компонента от DOM ‘ ComponentWillunmount ‘ выполняет. Этот метод обозначает конец жизненного цикла компонента.
Вот блок-схема последовательности операций методов жизненного цикла:
Это все в связи с этой важной частью методов реагирования – методы жизненного цикла. Я надеюсь, что вам понравилось читать это.
Спасибо!
Оригинал: “https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/”