День 11 — React-хуки для управления состоянием

Добро пожаловать в 11-й день вашего пути к изучению React! Сегодня мы сосредоточимся на хуках React, которые представляют собой мощную функцию, представленную в React 16.8, которая позволяет нам использовать состояние и другие функции React без написания компонентов класса.

Перехватчики React До появления перехватчиков состоянием можно было управлять только в компонентах класса, используя объект this.state и метод setState. Это затруднило повторное использование логики с отслеживанием состояния в компонентах и ​​усложнило написание функциональных компонентов, которые могли бы получить доступ к состоянию.

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

useState Хук useState позволяет нам добавлять состояние к нашим функциональным компонентам. Вот пример:

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

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

useEffect Хук useEffect позволяет нам выполнять побочные эффекты, такие как выборка данных из API или подписка на WebSocket, в наших функциональных компонентах. Вот пример:

import { useState, useEffect } from 'react';
function UserProfile(props) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch(`/api/users/${props.userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [props.userId]);
  if (!user) {
    return <p>Loading user...</p>;
  }
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

В этом примере мы определяем переменную состояния user и функцию setUser, используя хук useState. Мы также определяем эффект с помощью хука useEffect, который извлекает пользовательские данные из API при изменении значения props.userId. Эффект срабатывает всякий раз, когда изменяется props.userId, потому что он передается как массив зависимостей на хук useEffect.

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