Про state и hook

Состояние (state) в React представляет собой данные, которые хранятся внутри компонента и могут изменяться в течение жизненного цикла компонента. Состояние позволяет компонентам React обновлять свой пользовательский интерфейс (UI) в зависимости от действий пользователя, данных из сети и других внешних источников.

hook - это функция которая позволяет менять state внутри функциональных компонент.

• Есть так же классовые компоненты, раньше если нужно было использовать состояние, то нужно было всегда создавать классовый компонент.

Хук useState

Хук useState — это функция, предоставляемая React, которая позволяет добавлять состояние в функциональные компоненты. Он используется для объявления переменной состояния и функции, которая будет изменять это состояние. Это как обычная переменная, только она не будет обновляться после выхода из функции, ее сохраняет react.

Пример использования useState

Давай рассмотрим пример счетчика и управляемого компонента с инпутом:

• Управляемый компонент - это когда мы обновляем state и он сразу обновляет нам UI то есть наш компонент, то что мы видим и state синхронизированны по сути.

Пример компонента счетчика:

import React, { useState } from 'react';

// Пример компонента счетчика
const Counter = () => {
    // useState принимает в себя наше значение с которым мы будем работать и функцию, которая это значение будет менять.
    // (Если в консоли посмотреть на внутренности useState, то увидим массив из двух элементов. Первый - значение, а второй - функция)
  const [count, setCount] = useState(0);   // Так как мы знаем что useState возвращает массив из двух объектов, мы можем использовать деструктуризацию этого массива. 

  const increment = () => {
    setCount(count + 1); // Функция для увеличения count на 1
  };

  const decrement = () => {
    setCount(count - 1); // Функция для уменьшения count на 1
  };

  return (
    <div>
      <h2>Счетчик</h2>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};


export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

Пример управляемого компонента:

// Пример управляемого компонента с инпутом
const InputComponent = () => {
  const [inputValue, setInputValue] = useState(''); // Используем useState для состояния значения инпута

  const handleChange = (event) => {
    setInputValue(event.target.value); // Функция для обновления значения инпута
  };

  return (
    <div>
      <h2>Управляемый компонент с инпутом</h2>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Значение инпута: {inputValue}</p>
    </div>
  );
};


export default function App() {
  return (
    <div>
      <InputComponent />
    </div>
  );
}

Конструктор счетчика и инпута

Небольшой разбор примеров

1. Счетчик (Counter):

   • Используем useState для создания переменной состояния count с начальным значением 0. Функции increment и decrement используют setCount, чтобы изменить состояние count на +1 и -1 соответственно. Кнопки + и - используют эти функции для увеличения и уменьшения счетчика.

2. Управляемый компонент с инпутом (InputComponent):

   • Используем useState для создания переменной состояния inputValue с пустой строкой в качестве начального значения. Функция handleChange вызывается при изменении значения в инпуте и обновляет inputValue с помощью setInputValue. Значение инпута (inputValue) отображается как часть UI компонента. Сам способ называется двухсторонним связыванием. Мы связязали значение внутри инпута с состоянием. Подобные компоненты называются управляемыми, потому что мы можем изменить значение компонента изменив состояние.