Использование React-хука useEffect Hook

Использование useEffect, вероятно, лучшая часть React Hooks. Это помогает уменьшить беспорядок в методах жизненного цикла компонентов и, что наиболее важно, помогает разделить различную логику, которая может появляться в методах жизненного цикла. Сегодня мы собираемся рассмотреть один пример для каждого из основных преимуществ useEffectс примерами с веб-сайта React.

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

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

Как вы уже можете видеть из приведенного выше примера, это затем покажет, насколько хороша useEffectв случае использования вызовов API и размонтирования. Ниже приведен простой пример того, как могли бы выглядеть ваши методы жизненного цикла, если бы вы использовали ChatAPI для подписки на онлайн-статус друга.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

Не забывайте, что useEffectон запускается при каждом повторном рендеринге! Это может быть излишним, если ваше обновление требует больших затрат на графику или вызов API не требуется постоянно. Одна из лучших сторон useEffectзаключается в том, насколько легко что-то оптимизировать.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

useEffect(() => {}, []);

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

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

У каждой useEffectесть своя собственная функция, которая может обрабатывать собственное монтирование, обновления и размонтирование. Я считаю, что это помогает «сторонним» разработчикам легче поддерживать и, при необходимости, вносить изменения в эту часть кодовой базы, не нарушая случайно другие части кода. Они также могут легко вносить изменения или дополнения в оптимизацию для него.

Они могут быть уверены, что изменяемая useEffectфункция обрабатывает только то, что необходимо для конкретной подписки или обновления. Конечно, если исходный разработчик не добавил к этой функции несвязанную логику! Я знаю, ты бы никогда не сделал ничего подобного, верно?

Спасибо, что прочитали мою небольшую статью об использовании useEffectловушки в React. Если вам понравилось (и вы чему-то научились), я думал также затронуть тему оптимизации в React в ближайшем будущем, в частности, useStateпоскольку я еще не говорил об этом. Тем не менее, спасибо за ваше время и будьте в безопасности!