Как осуществляется хранение состояний в React?

Вопрос: Можете описать, как и где React хранит состояния, и как это влияет на рендер? Пожалуйста, приведите пример использования useState для большей наглядности.
  • 20 ноября 2023 г. 10:11
Ответы на вопрос 2
В React состояния хранятся и управляются с помощью хуков состояния, таких как useState. 

Хранение состояний осуществляется внутри компонентов. При создании компонента React создает виртуальный DOM, который содержит информацию о текущем состоянии компонента и его свойствах. Когда состояние компонента изменяется, React обновляет только соответствующие части виртуального DOM и эффективно обновляет реальный DOM, чтобы отобразить новое состояние пользователю.

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

import React, { useState } from 'react';

const ExampleComponent = () => {
  // Определение состояния с помощью useState
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Счетчик: {count}</h1>
      <button onClick={incrementCount}>Увеличить</button>
    </div>
  );
};

В этом примере useState используется для создания состояния count со значением 0. Метод setCount, возвращаемый хуком состояния, позволяет обновлять значение состояния. Внутри компонента создается кнопка, нажатие на которую вызывает функцию incrementCount, которая увеличивает значение count на 1 при каждом клике. Значение состояния count отображается внутри заголовка h1, который автоматически обновляется при изменении состояния.
Локальное состояние обычно хранится в верхнем компоненте, используя хук useState. Например:
const [count, setCount] = useState(0);

Глобальное состояние, такое как состояние Redux, хранится в централизованном месте, называемом store.

Можно посмотреть более конкретные примеры в документации или задать более конкретные вопросы. 

Если число 1 передать в функцию setCount, это приведет к обновлению значения count и вызову рендера.
Похожие вопросы