Привет, ребята, в этом пошаговом руководстве я покажу вам все, что вам нужно знать, чтобы профессионально использовать функцию React useEffect.

Краткая история

До появления useEffect существовали методы жизненного цикла, а именно:

  1. componentDidMount
  2. componentDidUpdate
  3. componentWillUnmount

Есть еще пара, но это основные. componentDidMount запускается сразу после визуализации HTML-кода компонента. componentDidUpdate запускается при обновлении состояния или свойств. componentDidUpdate предоставляет предыдущее состояние и свойства, чтобы вы могли сравнивать и сопоставлять изменения и принимать решения на основе этой информации. например

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

componentWillUnmount, запускаемый непосредственно перед размонтированием компонента, обычно используется для отмены подписки на слушателей или любой другой очистки, которая может вам понадобиться.

С помощью этих методов жизненного цикла мы можем надежно обрабатывать любое изменение состояния компонента, так зачем же переходить на useEffect?

Введите компоненты React без сохранения состояния

В какой-то момент (я полагаю, еще в 2016 году) команда React приняла решение создать компоненты React, которые можно создать с помощью обычной функции Javascript старой школы. Так:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

Больше нет этого, больше нет React.Component, больше нет render () {}. К сожалению, для методов жизненного цикла, эти методы были внедрены в компонент вместе с React.Component, поэтому пришлось создать новый подход, позволяющий пользователям обрабатывать изменения состояния.

Введите React.useEffect

Новый подход к управлению изменениями состояния появился в форме функции useEffect, предоставляемой библиотекой React. Итак, как нам воссоздать наши любимые методы componentDidMount, componentDidUpdate и componentWillUnmount? Давайте расширим нашу предыдущую функцию без сохранения состояния:

import React from "react";
function MyFunc(props) {
  const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount");
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
  React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
  return <div>Hey!</div>
}

Если вы потратите время на изучение кода, вы увидите, что мы настроили события для всех изменений состояния, как и в предыдущем подходе с использованием методов жизненного цикла. Между прочим, переменные, которые мы помещаем в массивы, называются зависимостями ; , поэтому зависимости функции useEffect . Одна небольшая ошибка, которую следует иметь в виду, заключается в том, что независимо от того, сколько зависимостей вы добавляете к функции useEffect (если есть), функция useEffect срабатывает при монтировании, поэтому обязательно учитывайте это.

Еще одна вещь, которую мы добавили в этот пример, React.useState, обработчик состояния, выходит за рамки этого руководства, но узнайте об этом больше здесь!

Выходя за рамки управления жизненным циклом

Замечательно, что мы можем управлять состоянием компонента, а также с помощью предыдущих методов жизненного цикла. Между простотой и возможностью повторного использования функций без сохранения состояния и функцией React.useEffect нам стала доступна новая парадигма: многоразовые функции с отслеживанием состояния, или более часто называемые: пользовательские хуки. .

Опытный читатель, такой как вы, вероятно, заметил, что с useEffect мы не можем получить доступ к свойству prevProps или prevState, как раньше. Не бойся! Прочтите решение для этого здесь. Причина, по которой это решение работает, заключается в том, что React.useRef не запускает повторную визуализацию компонента. Кроме того, useEffect без зависимостей срабатывает каждый раз при повторной отрисовке компонента независимо от того, какое изменение состояния вызвало его.

Привет, пользовательские хуки

На самом деле нет лучшего базового примера для кастомного хука, чем тот, который React делится в своей официальной документации здесь. Давайте начнем с конца примера и продвинемся вверх:

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

Цель этой функции без сохранения состояния ясна: изменить цвет друга на зеленый или черный в зависимости от того, в сети ли он. Но как мы туда доберемся?

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Здесь номер один, на который следует обратить внимание, - это возвращаемое значение. Вместо HTML, как мы обычно делаем с компонентами без состояния, в этом случае мы возвращаем логическое. номер два, на которую следует обратить внимание, - это наше входное значение. Вместо того, чтобы передавать реквизиты, как в компоненте без состояния, мы передаем значение - friendID. После этого мы просто используем useEffect для отслеживания изменений онлайн-статуса указанного пользователя и отслеживаем текущий статус с помощью обработчика состояния isOnline.

Заключение

В этом уроке мы рассмотрели:

  1. Как мы управляли жизненным циклом компонента до useEffect и почему этот подход стал устаревшим
  2. Как мы можем использовать useEffect для эффективного управления жизненным циклом компонента
  3. Как мы можем воспользоваться преимуществами многократного использования функций без сохранения состояния React и useEffect для создания многоразовых функций с отслеживанием состояния.

Если вы нашли эту статью полезной, не забудьте аплодировать! Поймать вас на обороте.