Стейты в React

Стейты в React - это реактивные переменные компонентов. Реактивность позволяет автоматически делать рендер всего компонента при изменении переменной.

Для использования функционала стейтов необходимо сначала импортировать функцию useState:

import React, { useState } from 'react';

Функция useState первым параметром принимает значение стейта и возвращает массив из текущего значения и функции для его изменения.

Строковые значения

Сделаем стейт с описанием еды:

import React, { useState } from 'react';

function App() {
   const state   = useState('food');
   const name    = state[0];
   const setName = state[1];

   return <div>
      {name}
   </div>;
}

export default App;

Если запустить этот код, то на странице появится div контейнер с начальным значениемстейта "food". Изменяя значение с помощью функции setName оно автоматически будет изменяться в div контейнере.

Во втором элементе массива useState возвращается функция, которую нужно использовать для изменения значения стейта. Её можно записать в любую переменную. В примере мы называли её setName, исходя из той логики, что оно относится к названию еды. Но в других примерах можно называть функцию по-разному: setPrice, setValue, setMouseDC и т.п. Если используете несколько стейтов, то обязательно продумайте название этих переменных, чтобы по ним определить принадлежность к стейту.

Обычно в таком коде используется деструктуризация для сокращения записи. Попробуем переписать код. И добавим реактивность через дополнительную функцию для обработчика клика по кнопке, чтобы продемонстрировать всё вышесказанное:

import React, { useState } from 'react';

function App() {
   const [name, setName] = useState('food');

   function setFood {
      setName('Сыр!');
   }

   return <div>
      <span>{name}<span>
      <button onClick={setFood}>Кликни на меня!<button>
   </div>;
}

export default App;

Если запустить такое приложение, то сначала в div контейнере мы увилим слово "food" и кнопку под ним с надписью "Кликни на меня". После клика надпись "food" изменится на "Сыр!".

Код из предыдущего примера можно сократить, используя стрелочную функцию:

import React, { useState } from 'react';

function App() {
   const [name, setName] = useState('food');

   return <div>
      <span>{name}<span>
      <button onClick={() => setName('Сыр!')}>Кликни на меня!<button>
   </div>;
}

export default App;

Логические значения

Порой в проектах появляется необходимость сделать логическое значение в стейте. Приведём пример изменения такого логического значения:

import React, { useState } from 'react';

function App() {
   const [isFalse, setLogic] = useState(false);

   return <div>
      <span>{isFalse? 'равно False': 'равно True'}<span>
      <button onClick={() => setLogic(!isFalse)}>Изменить<button>
   </div>;
}

export default App;

Если загрузить такой код, то на странице появится надпись "равно False", а ниже будет находиться кнопка "Изменить". Если кликнуть на неё, то надпись сверху изменится на "равно True". Повторный клик изменит надпись обратно на "равно False".

Цифровые значения

Попробуем изменить код предыдущего примера. Поставим вместо логического значения целую цифру, чтобы сделать счётчик. А для его инкрементации используем стрелочную функцию, которая будет прибавлять "1" единицу:

import React, { useState } from 'react';

function App() {
   const [count, cntInc] = useState(0);

   return <div>
      <span>Количество: {count}<span>
      <button onClick={() => cntInc(count + 1)}>+1<button>
   </div>;
}

export default App;

Если загрузить такой код, то на странице появится надпись "Количество: 0", а ниже будет находиться кнопка "+1". Если кликнуть на неё, то надпись сверху изменится на "Количество: 1". Последующие клики по кнопке будут увеличивать это цифровое значение.