update browser

docs/react/03-lifecycle.md

@@ -3,3 +3,32 @@ sidebar_position: 3
 ---
 
 # Жизненный цикл компонента
+
+Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
+
+## Основные этапы жизненного цикла компонента:
+
+1. **Монтирование (Mounting):**
+Компонент создается и вставляется в DOM.
+   - `constructor(props)`: Вызывается до того, как компонент будет смонтирован. Используется для инициализации состояния и привязки методов.
+   - `static getDerivedStateFromProps(props, state)`: Вызывается непосредственно перед рендерингом, как при монтировании, так и при обновлении. Позволяет компоненту обновить состояние на основе изменений в пропсах.
+   - `render()`: Метод, который возвращает JSX. Он отвечает за отображение компонента в DOM.
+   - `componentDidMount()`: Вызывается сразу после монтирования компонента в DOM. Здесь можно выполнять запросы к серверу, подписываться на события или работать с DOM.
+2. **Обновление (Updating):**
+Компонент обновляется при изменении состояния или пропсов.
+   - `static getDerivedStateFromProps(props, state)`: Вызывается перед рендерингом при обновлении компонента.
+   - `shouldComponentUpdate(nextProps, nextState)`: Позволяет оптимизировать производительность, определяя, нужно ли перерисовывать компонент. Возвращает true или false.
+   - `render()`: Перерисовывает компонент, если это необходимо.
+   - `getSnapshotBeforeUpdate(prevProps, prevState)`: Вызывается прямо перед тем, как изменения из виртуального DOM будут применены к реальному DOM. Позволяет получить информацию о DOM перед обновлением.
+   - `componentDidUpdate(prevProps, prevState, snapshot)`: Вызывается после обновления компонента. Здесь можно выполнять дополнительные действия, такие как запросы к серверу или обновление состояния.
+3. **Размонтирование (Unmounting):**
+Компонент удаляется из DOM.
+   - `componentWillUnmount()`: Вызывается перед удалением компонента из DOM. Здесь можно выполнять очистку, такую как отмена таймеров, отписка от событий или отмена сетевых запросов.
+4. **Обработка ошибок (Error Handling):**
+React также предоставляет методы для обработки ошибок, которые происходят в компонентах.
+   - `static getDerivedStateFromError(error)`: Вызывается после возникновения ошибки в дочернем компоненте. Позволяет обновить состояние для отображения запасного UI.
+   - `componentDidCatch(error, info)`: Вызывается после возникновения ошибки. Позволяет логировать ошибки или выполнять другие действия.
+
+С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими.
+
+Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.