Полное руководство по пониманию хука React UseState

Hello World, в этой статье мы рассмотрим, как управлять состояниями в нашем React-приложении с помощью хука useState.

К моменту завершения чтения статьи вы должны быть в состоянии

• Понимать state
• Как реализовать хук useState
• Как обновлять state в вашем приложении, а также некоторые правила использования хука useState.

Давайте начнем.

Понимание состояния в React

Состояние — это данные или значения, которые могут быть изменены в нашем приложении. Оно описывает состояние нашего приложения в любой момент времени.

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

• щелчок по кнопке
• ввод значения в поле формы
• отправка формы.
• Нажатие на следующую кнопку в карусели изображений.

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

Состояние может быть любого типа данных, это может быть object, array, string, boolean и т.д.

Приведенный ниже код демонстрирует, как использовать состояние в компоненте.

Использование состояния в компоненте

import React from "react"
import "./styles.css";

export default function App() {
  // defining a regular variable
  const userMsg = "Start learning React Hooks";

  return (
    <div className="App">
      <h1>Hello User</h1>
      <h2>{userMsg}</h2>
      <button>Get Started </button>

    </div>
  );
}

В приведенном выше коде:

• Мы определили «обычную» переменную userMsg, которую мы будем называть переменной state (пока).
• Затем мы присваиваем некоторое значение userMsg.
• В нашем JSX шаблоне мы выводим информацию, хранящуюся в userMsg следующим образом {userMsg}.
• Таким образом, мы сохраняем значение (состояние) между вызовами функций. При любой перезагрузке приложения мы будем видеть на экране значение, сохраненное в userMsg.

Отображение состояния в нашем пользовательском интерфейсе

С помощью приведенного выше кода при запуске нашего приложения мы должны увидеть на экране следующее:

Hello User
Start learning React Hooks

Изменение состояния в React.

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

Давайте рассмотрим, как изменить состояние в нашем приложении.

• Мы хотим, чтобы состояние (значение или данные) изменилось с Начало изучения React Hooks на Урок первый: React useState Hook, когда пользователь нажимает на кнопку Get Started.

• Мы объявили функцию handleUserMsg, которая будет отвечать за обновление значения при нажатии на кнопку Get Started.

• Функция handleUserMsg будет вызвана, и в теле функции мы присвоим новое значение переменной userMsg.

Смотрите код ниже

import React from "react";
import "./styles.css";

export default function App() {
  // defining a  regular variable
  const userMsg = "Start learning React Hooks";

  const handleUserMsg = () => {
// assigning a new value to the variable
   userMsg = "Lesson one: React useState Hook"
  };
  return (
    <div className="App">
      <h1>Hello User</h1>
      {/* using the state  */}
      <h2>{userMsg}</h2>
      <button onClick={handleUserMsg}>Get Started</button>
    </div>
  );1
}

Что происходит в приведенном выше коде:

• При нажатии кнопки «Get Started» вызывается функция handleUserMsg, и Lesson one: React useState Hook теперь присваивается переменной userMsg.
• Таким образом, мы обновили значение (так мы учились присваивать новое значение переменной в JavaScript).

Повторное отображение компонента при изменении состояния.

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

В приведенном выше коде:

• Мы назначили Lesson one: React useState Hook переменной userMsg при выполнении функции handleUserMsg.
• Когда вызывается функция handleUserMsg, состояние (данные или значение изменились), и мы будем ожидать, что браузер сделает повторный рендеринг для вывода приведенного ниже кода на пользовательский интерфейс:

Hello User
Lesson one: React useState Hook

Примечание: Но этого не происходит, давайте выясним почему в следующем разделе.

Исследование «реактивности» в обычных переменных

Даже если мы ожидаем, что браузер выведет последние данные, присвоенные переменной userMsg, нажатие кнопки Get Started не обновляет состояние (данные) от Начало изучения React Hooks до Урок первый: React useState Hook.

Мы можем фактически доказать новое состояние Урок первый: React useState Hook было присвоено userMsg.

Обработчик события handleUserMsg() обновляет регулярную переменную userMsg. Однако изменение не видно из-за следующего:

• Переменная userMsg, объявленная выше, считается «обычной» переменной, а «обычные» переменные не переносятся между рендерами.
• При повторном рендеринге компонент не учитывает новые значения, присвоенные обычным переменным.
• Следовательно, любое обновление «обычных» переменных не вызовет рендеринга (React не понимает, что ему нужно снова рендерить компонент с новым значением).

Состояния должны быть реактивными

Значение, хранящееся в переменной userMsg, изменилось, но это изменение не отражается на пользовательском интерфейсе.

*Это происходит потому, что значение, хранящееся в переменной userMsg, является только обычной переменной, а не реактивной. *

Это означает следующее:

• React не отслеживает изменения обычной переменной.
• Когда значение изменяется, это не приводит к тому, что React перерисовывает компонент, чтобы отразить обновление.
• Следовательно, мы продолжаем видеть исходное значение Start learning React Hooks на пользовательском интерфейсе.

Обновление компонента с новыми данными.

Чтобы обновить компонент новыми данными, нам нужно сделать значение «реактивным».

Для этого необходимо выполнить следующие действия:

• Сохранить данные между рендерами
• Вызвать React для рендеринга компонента с новыми данными (повторный рендеринг).

Чтобы обновить компонент новыми данными, мы должны полагаться на хук useState. Он обеспечит две вещи:

• Во-первых, переменную состояния для сохранения данных между рендерами.
• Во-вторых, функцию-сеттер для обновления переменной и запуска React для повторного рендеринга компонента.

Используя хук useState, React может отслеживать изменения в значении, сравнивая новое значение с начальным.

Давайте теперь сделаем наше состояние реактивным с помощью хука useState().

Что такое хук useState?

Хук useState() позволяет вам добавлять переменные состояния в функциональные компоненты. Это позволяет разработчикам отслеживать изменения, обновлять и манипулировать состоянием внутри функциональных компонентов без необходимости преобразовывать их в компоненты класса.

Синтаксис для крючка useState

Синтаксис хука useState выглядит следующим образом

const [state, setState] = useState(initialState)

Как использовать хук useState

Чтобы использовать хук useState(), нам нужно импортировать его из библиотеки react, как показано ниже

import React,{useState} from "react";

• Теперь, когда мы импортировали хук useState(), мы можем использовать его в нашем функциональном компоненте и передать ему реактивное значение.
• Реактивное значение — это начальное значение или начальное состояние, которое вы хотите отобразить на пользовательском интерфейсе.

В коде ниже мы вызываем хук useState и передаем ему наше начальное состояние

... = useState("Start learning React Hooks");

Ниже приведен полный код, давайте разберем его подробнее:

import React, { useState } from "react";
import "./styles.css";

export default function App() {

//calling the useState hook and passing the initial value
  const [userMsg, setUserMsg] = useState("Start learning React Hooks");

//function to change the state
const handleUserMsg = () => {
//update the state inside this function's body 
};
  return (
    <div className="App">
      <h1>Hello User</h1>
      <h2>{userMsg}</h2>
      <button onClick={handleUserMsg}>Get Started</button>
    </div>
  );
}

Под капотом хука useState

Когда хук useState() вызывается следующим образом: useState("Start learning React Hooks"), он возвращает массив с двумя значениями:

• Во-первых, это начальное значение состояния
• Далее, функция под названием setter, отвечающая за обновление текущего состояния.

Затем мы используем деструктуризацию массива в JavaScript, чтобы сохранить значения, возвращенные вызовом функции useState() в отдельные переменные: userMsg и setUserMsg.

const [userMsg, setUserMsg] = useState("Start learning React Hooks");

В приведенном выше коде:

• Начальное состояние хранится в переменной userMsg.
• Функция-сеттер, отвечающая за обновление текущего состояния, будет храниться в переменной setUserMsg.
• Имя переменной зависит только от вас. По соглашению, мы называем переменные состояния как [someState, setSomeState].

Чтение переменной состояния

Начальное значение, хранящееся в переменной userMsg, можно прочитать . Мы используем его в нашем JSX-шаблоне как {userMsg}.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // defining a user message state

  const [userMsg, setUserMsg] = useState("Start learning React Hooks");

  //function to change the state
  const handleUserMsg = () => {};

  return (
    <div className="App">
      <h1>Hello User</h1>
      {/* using the state  */}
      <h2>{userMsg}</h2>
      <button onClick={handleUserMsg}>Get Started</button>
    </div>
  );
}

• Теперь везде, где мы используем состояние {userMsg} в нашем шаблоне, мы будем ожидать вывода начального значения Start learning React Hooks.

Обновление состояния с помощью функции Setter

Функция setter, возвращаемая хуком useState, отвечает за обновление состояния в компоненте react.

• Каждый раз, когда мы хотим обновить состояние в React, мы должны использовать функцию setter, а не обновлять состояние напрямую.
• То есть, мы не можем присвоить новое значение переменной в React и ожидать, что новое значение отразится в пользовательском интерфейсе. Нам нужно будет использовать функцию setter для присвоения нового значения.

Ссылаясь на код выше, когда мы нажмем на кнопку Get Started, будет выполнена функция обработчика события handleUserMsg.
В блоке кода функции handleUserMsg мы обновим состояние, выполнив следующие действия:

• Мы вызовем функцию setUserMsg, а затем передадим ей новое значение, которое мы хотим сохранить в userMsg.

Смотрите код ниже:

  const handleUserMsg = () => {
//updating the state variable
    setUserMsg("Lesson one: React useState Hook");
  };

• Функция setUserMsg теперь обновила значение, хранящееся в userMsg.

Теперь, когда мы нажмем кнопку Get Started, будет выполнена функция handleUserMsg, и в теле функции мы обновим значение, хранящееся в userMsg. Поскольку переменной userMsg было присвоено новое значение, компонент будет перерендерирован, и браузер отобразит новое значение Урок первый: React useState Hook.

Пользовательский интерфейс отобразит следующее:

Hello User
Lesson one: React useState Hook

Ниже приведен обновленный код:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // defining a user message state

  const [userMsg, setUserMsg] = useState("Start learning React Hooks");

  //function to update the state

  const handleUserMsg = () => {

//updating the state variable
    setUserMsg("Lesson one: React useState Hook");
  };
  return (
    <div className="App">
      <h1>Hello User</h1>
      {/* using the state  */}
      <h2>{userMsg}</h2>
      <button onClick={handleUserMsg}>Get Started</button>
    </div>
  );
}

Теперь, используя хук useState, мы можем добиться следующего:

• Решить, какие данные или информацию отображать на пользовательском интерфейсе
• Обновить эти данные или информацию с помощью функции setter, предоставляемой хуком useState().

Добавление нескольких переменных состояния в компонент

Более одного состояния (данных или информации) стольких типов данных можно добавить в наш компонент с помощью нескольких вызовов useState(). Это поможет нам отобразить важную информацию на пользовательском интерфейсе нашего приложения.

Чтобы добиться этого, используйте приведенный ниже синтаксис:

function MyComponent() {
  const [state1, setState1] = useState(initial1); // first state 
  const [state2, setState2] = useState(initial2); // second state
  const [state3, setState3] = useState(initial3); // third state 
  // ...
}

Давайте отобразим несколько данных или информации (состояние) в нашем приложении.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
// adding multiple states
  const [userName, setUserName] = useState("Emmanuel"); 
  const [posts, setPosts] = useState(7);
  const [showPosts, setShowPosts] = useState(false);

  return (
    <div className="App">
      {/* using the userName state */}
      <h1>Hello {userName}</h1>
      {/* using the  posts state  */}
      <p>You have {posts} articles published </p>
    </div>
  );
}

Вывод кода будет выглядеть следующим образом

Hello Emmanuel
You have 7 articles published

• В приведенном выше коде мы отображаем информацию о пользователе, а также количество опубликованных постов.
• Например, переменные состояния userName и posts не связаны между собой, поэтому мы создаем несколько переменных состояния.
• Если переменные состояния связаны между собой, будет хорошей идеей поместить их в object.

Использование объектов в качестве переменных состояния

Переменная состояния может быть любого типа data. До сих пор мы использовали строку и число в качестве переменных состояния.
Давайте рассмотрим использование object в качестве переменных состояния.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
//using objects as state variables.
  const [userDetails, setUserDetails] = useState({
    fullName: "Emmanuel Kumah",
    title: "Frontend Developer",
    location: "Ghana",
    bio: "Helping you understand everyline of code"
  });

  return (
    <div className="App">
      <h1>Profile </h1>
      <p>
        <strong>Name:</strong>
        {userDetails.fullName}
      </p>
      <p>
        <strong>Title:</strong>
        {userDetails.title}
      </p>

      <p>
        <strong>location</strong>
        {userDetails.location}
      </p>
      <p>
        <strong>Bio</strong>:{userDetails.bio}
      </p>
    </div>
  );
}

• В userDetails хранится object {...}.
• В нашем шаблоне JSX мы можем получить доступ к объекту values, используя соответствующий key Например, {userDetails.fullName}.

В результате вы получите следующее:

Profile
Name:Emmanuel Kumah

Title:Frontend Developer

location: Ghana

Bio:Helping you understand everyline of code

• Все наши данные хранились в объекте под названием userDetails.
• Мы получили доступ к данным, хранящимся в объекте userDetails, используя пару key:value в JavaScript.
• После этого наш пользовательский интерфейс отобразит необходимые данные.
• Если мы захотим обновить данные, мы воспользуемся функцией setUserDetails и обновим соответствующее значение.

Обновление состояния на основе предыдущего состояния

Часто мы хотим обновить состояние, опираясь на значение предыдущего состояния.

Например:

• У нас есть переменная состояния count, инициализированная в 0.
• Когда мы нажимаем на кнопку Count me, мы хотим подсчитать, сколько раз была нажата эта кнопка.
• Для этого нам нужен доступ к предыдущему счету, чтобы увеличить его на единицу.

Рассмотрим пример

import React, { useState } from "react";
import "./styles.css";

export default function App() {
     const [count, setCount] = useState(0);

  // function to increase count
  const handleCount = () => {

//updating the state based on previous value
    setCount((count) => count + 1);
  };
  return (
    <div className="App">
       {/* using the count state  */}
        <p>You have clicked the button {count} times</p>
        <button onClick={handleCount}>Count me</button>
      </div>
    </div>
  );
}

Что происходит в приведенном выше коде:

1. Был вызван хук useState(), который передал начальное значение 0.
2. Два значения, возвращенные вызовом useState(0), хранятся в переменных count и setCount.
3. Значение начального состояния 0 хранится в переменной count.
4. Функция setCount, которая является setter, обновит значение count.
5. В нашем шаблоне JSX мы отображаем значение count как {count}.
6. При повторном рендеринге компонента мы увидим на экране значение 0.

• Чтобы обновить значение count на основе предыдущего значения, нам нужно передать функцию обновления в setCount.
• Функция updater принимает предыдущее состояние и оценивает следующее состояние.

Ниже приведена функция для обновления состояния

  // function to increase count
  const handleCount = () => {
    setCount((count) => count + 1);
  };

• Обратите внимание на setCount((count) => count + 1).
• (count) => count + 1 — это функция updater. Это функция callback, которую мы передали функции setter.
• Когда функция setCount будет выполнена, она оценит выражение, переданное в качестве аргументов.
• В выражении мы обращаемся к текущему count, увеличиваем его значение на 1 и возвращаем значение
• Таким образом, если текущее состояние count имеет значение 0, при первом нажатии кнопки значение обновляется до 1.

Если вы хотите обновить состояние на основе значения в предыдущем состоянии, не забудьте передать функцию updater в функцию setter.

• Нажав на кнопку count me, мы вызываем функцию handleCount.
• В setCount ставит в очередь функцию callback или updater.
• Во время следующего рендера будет вызвана функция updater, которая возьмет предыдущее значение count, добавит к нему 1, count + 1, и вернет **обновленное **значение.
• При следующем нажатии на кнопку значение current state теперь 1, и мы добавляем 1 к текущему состоянию, возвращая следующее значение 2.

Вот что происходит, когда мы нажимаем на кнопку count me 3 раза.

  // function to increase count
  const handleCount = () => {
    setCount((count) => count + 1); // setCount(0 => 1);
    setCount((count) => count + 1); // setCount(1 => 2);
    setCount((count) => count + 1); // setCount(2 => 3);

  };

Где вызывать хук useState()

Помните о следующих правилах при использовании хука useState():

• Не используйте useState() в циклах, условиях, вложенных функциях и т.д.
• Используйте только useState() внутри функционального компонента или пользовательского хука
• Вызывайте хук useState() на верхнем уровне компонента.

Подведение итогов

В заключение:

• В приложении React плохой практикой является обновление переменных состояния напрямую, как мы это делаем в JavaScript.
• Мы должны использовать хук useState для отслеживания, обновления и управления состояниями в функциональных компонентах
• Переменная state может быть любого типа данных (строки, числа, булевы, объекты).
• Вызов хука useState(initialState) возвращает два значения, initalState и функцию setter.
• Для обновления состояния используйте функцию setter.
• Когда состояние обновляется, компонент перерисовывается, чтобы показать обновленное состояние (данные) в нашем пользовательском интерфейсе.
• Вы можете иметь несколько переменных состояния в вашем компоненте.

Спасибо, что нашли время прочитать мою статью. Если вы нашли эту статью полезной, поделитесь ею на своих страницах в социальных сетях. Любые комментарии или предложения по статье будут вам признательны.

Написано с любовью из Ганы. Me daa se (Спасибо)