🤔 Как сделать так, чтобы значение, которое постоянно меняется, появлялось на экране моего приложения React?

Что такое государство?

В React State — это встроенный объект React, который содержит данные о компоненте (т. е. памяти компонента) и изменениях в зависимости от взаимодействия с пользователем.

Например, при выборе параметра "Список желаний" на веб-сайте магазина этот товар добавляется в список желаний и отображается указание на то, что этот товар находится в списке желаний.

Когда использовать состояние?

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

Здесь всякий раз, когда пользователь нажимает кнопку увеличения или уменьшения, мы хотим показать значение счетчика в соответствии с взаимодействием (т. Е. Когда я нажимаю увеличение, заданное значение счетчика равно 0, значение счетчика должно измениться на 1)

Начнем с извлечения переменных из компонента счетчика.

  1. название = «Счетчик»
  2. значение счетчика = 0

Теперь приступим к реализации,

import React from "react";
function Counter() {
 const title = "Counter";
 var counterValue = 0;
 function incrementCounter() {
  counterValue += 1;
  console.log("increased counter to ", counterValue);
 }
 return (
  <>
   <h1>{title}</h1>
   <div>{counterValue}</div>
   <button onClick={incrementCounter}>Increment</button>
  </>
 );
}
export default Counter;

Но когда приложение запущено, мы не видим, как счетчик counterValue увеличивается, когда я нажимаю кнопку увеличения (Ссылка на песочницу)

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

Здесь мы можем ясно видеть, что когда мы обновляем counterValue, оно не меняется в DOM. Здесь в игру вступает государство,

Если counterValue было состоянием, когда мы обновляем counterValue,

  • Он сохраняет значение counterValue между рендерингами.
  • Он запускает наш компонент Counter для рендеринга компонента с обновленным значением counterValue (повторный рендеринг).

Чтобы быть точным, всякий раз, когда мы хотим обрабатывать память, которая может измениться из-за взаимодействия с пользователем, мы предпочитаем использовать состояния.

Как использовать состояние?

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

import { useState } from 'react';
const [counterValue, setCounterValue] = useState(0);

Здесь,

  1. counterValue — переменная состояния, содержащая значение, которое сохраняет данные между рендерингами.
  2. setCounterValue — функция-установщик для обновления counterValue и запуска React для повторного рендеринга компонента Counter.
  3. useState(0) – 0 является нашимначальным значением для counterValue.

Теперь применим это к нашему компоненту Counter

var counterValue = 0;

Превращается в

const [counterValue,setCounterValue] = useState(0)

И часть обновления преобразуется следующим образом

function incrementCounter() {
  counterValue += 1;
  console.log("increased counter to ",counterValue)
}

To

function incrementCounter() {
  setCounterValue(counterValue+1)
}

Компонент счетчика в целом выглядит следующим образом

import React, { useState } from "react";

function Counter() {
 const title = "Counter with counterValue as state variable";
 const [counterValue, setCounterValue] = useState(0);

 function incrementCounter() {
  setCounterValue(counterValue + 1);
 }

 return (
  <>
   <h1>{title}</h1>
   <div>{counterValue}</div>
   <button onClick={incrementCounter}>Increment</button>
  </>
 );
}
export default Counter;

Операция внутри работает следующим образом

  1. Первоначально counterValue равен 0, поэтому он отображает значение счетчика на экране как 0.
  2. Когда я нажимаю кнопку увеличения, вызывается setCounterValue(counterValue+1), который изменяет counterValue на 1 и запускает повторную визуализацию.

Ссылка на Песочницу кода

Другие особенности

  1. Состояния являются частными для компонента, который он объявлен
  2. Государства также изолированы,
  3. то есть, когда я визуализирую два компонента счетчика, я говорю Counter1, Counter1.
  4. Когда я нажимаю кнопку увеличения счетчика 1, значение счетчика 1 становится равным 1 (скажем, предыдущее состояние было 0), а значение счетчика 2 остается равным 0 (скажем, предыдущее состояние было 0) [Ссылка на песочницу кода]

Уууу, мы узнали о штате 🎉

Ссылки:

Хорошего дня!