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

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

import React, { useState } from 'react';
const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

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

import React, { useEffect, useState } from 'react';
const DataFetcher = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };
  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};

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

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme }}>Themed Button</button>
  );
};

1. Хук useReducer:
   Хук useReducer — это альтернатива useState для управления сложным состоянием. Вот пример:

import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

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