Junior — Middle

¿Qué etapas atraviesan los componentes de React desde su creación hasta su eliminación del DOM?

sobes.tech AI

Respuesta de la IA

Компоненты React проходят несколько основных этапов жизненного цикла от создания до удаления из DOM:

Монтирование (Mounting) — создание и вставка компонента в DOM.
- Конструктор (constructor)
- static getDerivedStateFromProps
- render
- componentDidMount
Обновление (Updating) — происходит при изменении props или state.
- static getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
Размонтирование (Unmounting) — удаление компонента из DOM.
- componentWillUnmount
Обработка ошибок (Error Handling) — при возникновении ошибок в дочерних компонентах.
- static getDerivedStateFromError
- componentDidCatch

Пример использования методов жизненного цикла в классовом компоненте:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Компонент смонтирован');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Компонент обновлён');
  }

  componentWillUnmount() {
    console.log('Компонент будет удалён');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

В функциональных компонентах с хуками аналогичные этапы реализуются через useEffect и другие хуки.

Anterior Siguiente