Введение в хуки в React

Как мы применяем useState() и useEffect() в React?

Чтобы понять хуки, вы должны иметь хорошее представление о:

• Реагировать 16.8+
• Состояние и реквизит
• Методы жизненного цикла
• Функциональные компоненты

Какие крючки?

Хуки - это функции JavaScript, которые были добавлены в React в версии 16.8. Они позволяют разработчикам «подключаться» к функциям реагирования и манипулировать состоянием без необходимости писать классы. Их цель не в том, чтобы удалить компоненты класса из React, а в том, чтобы сэкономить время при переключении между классами, функциями, компонентами более высокого порядка и реквизитами рендеринга. Когда вы впервые начинаете практиковать хуки, лучше сначала попробовать их с несложными компонентами, а затем перейти к написанию более сложных, чтобы увидеть их весь потенциал. Их также можно только использовать в функциональных компонентах.

useState () Крюк

Чтобы объявить состояние, вы должны установить две переменные, в этом случае мы будем использовать count и setCount, и установить их равными функции useState(). Аргумент, переданный в функцию useState(), будет нашим начальным значением. Нам нужно установить две переменные, потому что useState() возвращает пару значений. Давайте закодируем это!

import React, {useState} from 'react';
function Counter() {
//Here we declared 'count' and 'setCount'
//count is set to equal 0, and setCount is our function that we will use to update state later
 const [count, setCount] = useState(0);
}

Причина, по которой мы помещаем count и setCount в массив, заключается в том, что, как было сказано ранее, useState() возвращает пару значений. Это называется деструктуризацией массива. Это в основном то, как это выглядит изнутри.

let counterVariable = useState(0);
let counter = counterVariable[0];
let setCounter = counterVariable[1]; 

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

import React, {useState} from 'react';
function Counter() {
//Here we declared 'count' and 'setCount' to equal 0
 const [count, setCount] = useState(0);
 return (
  <div>
   <h1>You clicked me {count} times!</h1>
  </div>
 );
}

Затем давайте добавим кнопку и некоторые функции, которые будут увеличивать наш счетчик при каждом нажатии кнопки. Для этого мы собираемся вызвать другую объявленную нами переменную setCount, которая является функцией и аналогична this.setState() в компонентах класса. Посмотрим, как это выглядит.

import React, {useState} from 'react';
function Counter() {
 const [count, setCount] = useState(0);
return (
  <div>
   <h1>You clicked me {count} times!</h1>
   <button onClick={() -> setCount(count + 1)}
    Click me!!
   </button>
  </div>
 );
}

Вот и все, что касается наших счетчиков! Ничего страшного, если все это поначалу не имеет смысла. Это определенно то, к чему нужно привыкнуть и снова начать с простых функций и развиваться оттуда. Просто нужно много практики!

useEffect () Крюк

Хук useEffect() позволяет вам выполнять побочные эффекты в вашем приложении. Эта функция аналогична componentDidMount, componentDidUpdate и componentWillUnmount. Вы можете думать о useEffect() как о совокупности всех этих трех функций! Аккуратно, правда?

В компонентах класса вы обычно должны иметь componentDidMount и componentDidUpdate с повторяющимся кодом внутри обеих этих функций. Вместо этого с помощью хуков вы просто вызовете useEffect() и передадите то, что вы хотите смонтировать, и response автоматически узнает, когда его обновлять, а когда размонтировать. Давайте воспользуемся примером, с которым мы работали ранее, чтобы показать, как это используется.

import React, {useState, useEffect} from 'react';
function Counter() {
 const [count, setCount] = useState(0);
 useEffect(() => {
  document.title = `You clicked me ${count} times!`;
})
return (
  <div>
   <h1>You clicked me {count} times!</h1>
    <button onClick={() -> setCount(count + 1)}
    Click me!!
    </button>
  </div>
 );
}

Функция, которую мы передаем в useEffect(), - это эффект. Внутри нашей функции мы выбрали заголовок документа. Когда response отображает этот компонент, он запоминает эффект, который мы использовали в нашем useEffect(), и запускает его после обновления DOM. Также хорошо отметить, что функция, которая передается в useEffect(), будет отличаться при каждом рендеринге, потому что у нее всегда будет текущее обновленное значение count. Каждый раз, когда наше приложение выполняет повторную визуализацию, мы действительно заменяем предыдущий эффект другим запланированным эффектом.

Очистка с помощью useEffect ()

Допустим, вы создаете приложение для социальных сетей с помощью API и хотите добавить функцию «добавить друга». При работе с классами вам придется использовать componentDidMount() и componentWillUnmount() для изменения статуса, когда пользователь «дружит» или «удаляет» другого пользователя из друзей. Благодаря хукам, useEffect() упрощает одновременное выполнение обеих этих функций.

import React, { useState, useEffect } from 'react';
function Add(props) {
 const [isFriended, setIsFriended] = useState(null)
 const handleFriendChange = (status) {
  setIsFriended(status.isFriended);
}
 useEffect(() => {
  SocialMediaAPI.addFriend(props.friend.id, handleFriendChange)
  //This function will trigger when the component unmounts
  return () => {
   SocialMediaAPI.removeFriend(props.friend.id, handleFriendChange);
  }
 })
}

Это useState() и useEffect() в двух словах! Если вы хотите погрузиться глубже, узнать о других типах крючков или научиться создавать свои собственные, ознакомьтесь с приведенной ниже документацией. Удачного взлома!