Привет, дорогие любители React! Вы когда-нибудь задумывались, как сделать ваши компоненты React более крутыми и динамичными? Что ж, вам повезло, потому что сегодня мы узнаем о хуках React!

Хуки React — это классная функция, которая позволяет вам использовать состояние и другие возможности React без написания класса. Они делают ваш код короче, чище и более пригодным для повторного использования. В этом руководстве мы сосредоточимся на двух самых популярных хуках: useState и useEffect.

useState — это хук, который позволяет сохранять значения между вызовами функций и похож на this.state в классе. Вы можете использовать его для отслеживания любых данных, таких как текст, числа, списки, объекты и т. д.

С другой стороны, useEffect позволяет вам делать что-то в функциональных компонентах и ​​может рассматриваться как сочетание componentDidMount, componentDidUpdate и componentWillUnmount в классе. Вы можете использовать его для получения данных из API, изменения названия документа, прослушивания событий и т. д.

Но почему вы должны использовать эти крючки? И когда вы должны их использовать? Ну, позвольте мне сказать вам!

Вы должны использовать useState, когда хотите хранить некоторые данные, которые со временем изменяются в вашем компоненте. А для useEffect вы должны использовать его, когда хотите что-то сделать после рендеринга или обновления вашего компонента.

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

Звучит отлично? Большой! Давайте рассмотрим несколько примеров и посмотрим, как использовать эти хуки в действии!

Пример useState: счетчик

Давайте начнем с простого примера использования useState для создания компонента-счетчика, который показывает количество кликов и имеет кнопку, чтобы увеличить его на единицу.

Во-первых, нам нужно импортировать хук useState из React:

import { useState } from "react";

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

function Counter() {
  const [count, setCount] = useState(0);
}

Затем нам нужно вернуть некоторый JSX, который отображает значение счетчика и элемент кнопки. Мы можем использовать фигурные скобки для вставки выражений JavaScript внутри JSX. Нам также нужно добавить обработчик onClick для кнопки, которая вызывает функцию setCount с новым значением:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Вот и все! Мы создали функциональный компонент, который использует состояние с помощью хука useState.

Довольно круто, правда? Но как это работает? Позволь мне объяснить!

Когда мы вызываем хук useState с начальным значением 0, он возвращает массив с двумя элементами: значением текущего состояния (count) и функцией для его обновления (setCount). Мы используем синтаксис деструктурирующего присваивания, чтобы присвоить им имена.

Затем мы возвращаем некоторый JSX, который отображает значение счетчика и элемент кнопки. Когда мы нажимаем кнопку, мы вызываем функцию setCount с новым значением (count + 1). Это обновляет переменную состояния и запускает повторную визуализацию компонента. В результате мы видим обновленное значение счетчика на экране.

Таким образом, мы можем хранить и обновлять любые данные в нашем компоненте, используя хук useState. Это как волшебство!

Пример useEffect: получение данных

Теперь давайте посмотрим, как использовать useEffect для получения некоторых данных из API и отображения их в нашем компоненте. В этом примере мы будем использовать API-интерфейс JSON Placeholder, который предоставляет некоторые поддельные данные для целей тестирования.

Во-первых, нам нужно импортировать хук useEffect из React вместе с хуком useState:

import { useState, useEffect } from "react";

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

function Data() {
  const [data, setData] = useState(null);
}

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

function Data() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // fetch data here
  }, []);
}

Внутри функции обратного вызова мы можем использовать fetch API или любую другую библиотеку, чтобы сделать HTTP-запрос к конечной точке API. Для простоты мы будем использовать здесь выборку. API выборки возвращает обещание, которое преобразуется в объект ответа. Нам нужно вызвать метод json() для объекта ответа, чтобы получить фактические данные в формате JSON. Затем нам нужно вызвать функцию setData с данными в качестве аргумента, чтобы обновить нашу переменную состояния:

function Data() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  }, []);
}

Наконец, нам нужно вернуть некоторый JSX, который отображает данные в нашем компоненте. Мы можем использовать условный рендеринг, чтобы проверить, являются ли данные нулевыми или нет. Если он равен нулю, мы можем показать сообщение о загрузке. Если он не нулевой, мы можем сопоставить массив данных и отобразить каждый элемент в виде списка:

function Data() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  }, []);
  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>
              {item.name} - {item.email}
            </li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Вот и все! Поясню и это…

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

Хук useEffect также очищается после размонтирования компонента. Это означает, что он отменяет все ожидающие запросы или подписки, которые больше не нужны. Это предотвращает утечки памяти и нежелательное поведение.

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

Заворачивать

В этом руководстве мы узнали, как использовать два важных хука React: useState и useEffect. Мы увидели, как использовать useState для создания и обновления переменных состояния в функциональных компонентах и ​​как использовать useEffect для выполнения действий после рендеринга или обновления нашего компонента. Мы также увидели, как использовать условный рендеринг и методы массива для отображения данных в наших компонентах.

Хуки React — это мощный и элегантный способ написания компонентов React. Они позволяют нам использовать состояние и другие возможности React без написания класса, а также делают наш код короче, чище и более пригодным для повторного использования. Существует множество других хуков, которые предоставляет React, например useRef, useMemo, useCallback и т. д. Подробнее о них можно узнать из официальной документации React.

Надеюсь, вам понравилось это руководство и вы узнали что-то новое. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, дайте мне знать в комментариях ниже. Удачного кодирования!

Надеюсь, эта статья была вам полезна. Спасибо, что нашли время, чтобы прочитать его.



Получать электронное письмо всякий раз, когда Asiful Alam Fahim публикует.
Получать электронное письмо, когда Asiful Alam Fahim публикует. Зарегистрировавшись, вы создадите учетную запись Medium, если вы еще этого не сделали…medium.com



Если вас интересуют более подробные и технические статьи, подобные этой, обязательно подпишитесь на меня в Medium. А по всем вопросам, связанным со стартапами, бизнесом или веб-разработкой, обращайтесь ко мне в LinkedIn.

Готовы спроектировать и разработать собственный веб-сайт? Пожалуйста, не стесняйтесь обращаться ко мне! Я всегда здесь, чтобы ответить на ваши вопросы и помочь воплотить ваше видение в жизнь. Чтобы сохранить вдохновение, ознакомьтесь со статьями, которые я написал ниже. Давайте вместе продолжим расти и расширять наши знания!



Упростите разработку Next.js с помощью масштабируемой и гибкой настройки папки
Для создания масштабируемого и гибкого веб-приложения требуется надежная и хорошо структурированная кодовая база.javascript. Plainenglish.io





Как я успешно добавил блоги Medium на свой веб-сайт
Задумывались ли вы, как продемонстрировать свои статьи Medium на своем веб-сайте или в портфолио? В этом блоге мы погрузимся…javascript.plainenglish.io





Создайте RSS-канал для вашего веб-сайта Next.js
Вы ищете способ держать читателей вашего веб-сайта в курсе последних событий без необходимости… javascript.plainenglish.io



Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .