Хуки в ReactJS

Хуки React — это функция, представленная в React 16.8, которая позволяет вам использовать состояние и другие функции React в функциональных компонентах. Вот несколько примеров хуков React:

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

import React, { 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>
  );
}

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

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

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

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

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

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

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

useContext: хук useContext позволяет вам получить доступ к объекту контекста в функциональных компонентах. Вот пример:

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const myValue = useContext(MyContext);

  return (
    <div>
      <p>My value is: {myValue}</p>
    </div>
  );
}

В приведенном выше коде мы используем хук useContext для доступа к значению объекта контекста с именем MyContext. Затем мы отображаем значение на экране. Этот компонент должен быть потомком компонента MyContext.Provider, чтобы контекст был доступен.