React useState: резюме

За последние пару месяцев я погрузился в React и создал несколько простых приложений. Одна концепция, которую я с трудом переваривала, - это концепция React State . Недавно я наткнулся на отличный учебник (который очень рекомендую), который четко объясняет это. В этой краткой статье я постараюсь обобщить наиболее важные концепции, которые я изучил, следуя руководству, чтобы оно могло быть полезно и для других :-)

Что такое состояние в React? Состояние компонента - это данные, которые используются и отображаются внутри нашего компонента в определенное время.

В приведенном ниже коде мы создаем переменную (iceCreamFlavor) и присваиваем ей начальное значение «шоколад». Эта переменная отображается внутри нашего шаблона компонента с помощью фигурных скобок {iceCreamFlavor}. Можно было бы ожидать, что при нажатии на кнопку «Щелкните меня» вкус мороженого изменится с «шоколадного» на «клубничный» ... В конце концов, именно это и делает функция handleClick ...

const MyComponent = () => {
let iceCreamFlavor = "chocolate";
const handleClick = () => {
iceCreamFlavor = "strawberry";
};
return (
<div className="container-style">
<h2>Ice cream flavor</h2>
<p>{iceCreamFlavor}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};

Значение изменяется, но не отображается в компоненте. Почему это так?

Это связано с тем, что iceCreamFlavor не является реактивной переменной, и поэтому ее изменение не запускает React для повторного рендеринга шаблона компонента.

Чтобы сделать значение реактивным, нам нужно использовать ловушку useState, которая представляет собой особый тип функции.

Написав:

useState("chocolate")

«Шоколад» - это начальное значение, которое отображается внутри компонента с помощью фигурных скобок. Однако крючок еще не завершен. Для его доработки нам также потребуются:

1. «место» для хранения этого значения. В этом случае мы будем использовать «iceCreamFlavor» (обратите внимание, что это имя переменной произвольно).
2. функция, которая будет отвечать за обновление значения «iceCreamFlavor», в данном случае «setIceCreamFlavor». Обычно имя функции начинается с «set», за которым следует любое имя того, что мы обновляем.

const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)

const Home = () => {
  const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)
  
  const handleClick = () => {
    setIceCreamFlavor("strawberry");
  };
return (
 <div className="container-style">
 <h2>Ice cream flavor</h2>
 <p>{iceCreamFlavor}</p>
 <button onClick={handleClick}>Click me</button>
 </div>
 );
};

1. запускается функция handleClick.
2. setIceCreamFlavor также запускается, и это изменяет вкус мороженого с «шоколадного» на «клубничный», а также запускает повторную визуализацию шаблона.

Пара замечаний об этом крючке:

• useState можно использовать сколько угодно раз в одном компоненте.
• Чтобы использовать этот хук, его необходимо импортировать, как показано в начале нашего компонента:

import { useState } from “react”;