useEffect() и componentDidMount() - это методы жизненного цикла в React, которые позволяют обрабатывать эффекты после монтирования компонента.
Однако, есть некоторые различия между этими двумя методами:
| useEffect() | componentDidMount() |
|---|---|
| позволяет выполнять эффекты после каждого рендеринга компонента. По умолчанию, он выполняется после монтирования компонента, но также может вызываться после обновления компонента или перед размонтированием. | вызывается один раз, после того как компонент был вставлен в DOM. Он выполняет действия, которые связаны с инициализацией компонента, такие как получение данных с сервера или установка слушателей событий |
| вызываться после каждого рендеринга компонента, если его зависимости изменились. Если зависимости не изменились, эффект не будет вызываться повторно. | вызывается только один раз, при монтировании компонента. Если компонент обновился, этот метод не будет вызываться повторно. |
| используется только в функциональных компонентах других хуках | используется только в классовых компонентах |
| используется для выполнения любых эффектов, которые не связаны с инициализацией компонента, таких как обновление заголовка документа, подписка на события или выполнение асинхронных запросов. | используется для инициализации компонента и выполнения действий при его монтировании. |
Как воспроизвести componentDidMount с помощью useEffect?
Хотя для воспроизведения функционала componentDidMount можно воспользоваться конструкцией useEffect(fn, []), она не является точным эквивалентом componentDidMount.
А именно, она, в отличие от componentDidMount, захватывает свойства и состояние. Поэтому, даже внутри коллбэка, вы будете видеть исходные свойства и состояние. Если вы хотите увидеть самую свежую версию чего-либо, это можно записать в ссылку ref. Но обычно существует более простой способ структурирования кода, поэтому делать это необязательно. Помните о том, что ментальная модель эффектов отличается от той, что применима к componentDidMount и к другим методам жизненного цикла компонентов. Поэтому попытка найти точные эквиваленты может принести больше вреда, чем пользы. Для того чтобы работать продуктивно, нужно, так сказать, «думать эффектами». Основа их ментальной модели ближе к реализации синхронизации, чем к реагированию на события жизненного цикла компонентов.
// Монтирование
useEffect(() => {
// этот код будет выполнен при монтировании компонента (componentDidMount)
}, [])
// Размонтирование
useEffect(() => {
return () => {
// этот код будет выполнен при размонтировании компонента (componentWillUnmount)
}
}, [])
// Монтирование и размонтирование
useEffect(() => {
// этот код будет выполнен при монтировании компонента (componentDidMount)
return () => {
// этот код будет выполнен при размонтировании компонента (componentWillUnmount)
}
}, [])
// Монтирование, размонтирование и обновление
useEffect(() => {
// этот код будет выполнен при монтировании компонента (componentDidMount)
// а также после обновления любого элемента из массива зависимостей (componentDidUpdate)
return () => {
// этот код будет выполнен при размонтировании компонента (componentWillUnmount)
// а также до обновления любого элемента из массива зависимостей (componentWillUpdate)
}
}, [dep1, dep2])