В чём разница между локальным состоянием компонента и глобальным состоянием приложения

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

В разработке фронтенда, особенно в приложениях на React, Vue или Angular, управление состоянием является ключевым аспектом. Состояние определяет, как данные хранятся и изменяются в приложении. Различают два основных типа состояния: локальное и глобальное.

Локальное состояние компонента

Локальное состояние — это данные, которые управляются и используются внутри одного компонента. Оно не доступно другим компонентам напрямую. Локальное состояние идеально подходит для управления временными данными, которые не нужно делиться с другими частями приложения. Например, состояние формы, видимость модального окна или текущее значение инпута.

Пример на React:

import React, { useState } from 'react';
​
function Counter() {
  // Инициализация локального состояния с начальным значением 0
  const [count, setCount] = useState(0);
​
  // Функция для увеличения значения счетчика
  const increment = () => {
    setCount(count + 1);
  };
​
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
​
export default Counter;

• useState(0): Инициализирует локальное состояние count с начальным значением 0.
• setCount(count + 1): Обновляет состояние, увеличивая текущее значение на 1.
• count: Используется для отображения текущего значения счетчика.

Глобальное состояние приложения

Глобальное состояние — это данные, которые могут быть доступны и изменены из разных частей приложения. Оно используется для управления данными, которые должны быть синхронизированы между несколькими компонентами. Глобальное состояние часто управляется с помощью библиотек, таких как Redux, Context API в React или Vuex в Vue.

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

import React, { createContext, useContext, useState } from 'react';
​
// Создание контекста для глобального состояния
const GlobalStateContext = createContext();
​
export const GlobalStateProvider = ({ children }) => {
  // Инициализация глобального состояния
  const [globalCount, setGlobalCount] = useState(0);
​
  return (
    <GlobalStateContext.Provider value={{ globalCount, setGlobalCount }}>
      {children}
    </GlobalStateContext.Provider>
  );
};
​
// Хук для использования глобального состояния
export const useGlobalState = () => useContext(GlobalStateContext);

• createContext(): Создает контекст для хранения глобального состояния.
• GlobalStateProvider: Компонент, который предоставляет глобальное состояние всем дочерним компонентам.
• useGlobalState(): Хук, который позволяет компонентам получать доступ к глобальному состоянию.

Применение и выбор

Локальное состояние используется, когда данные нужны только внутри одного компонента и не влияют на другие части приложения. Глобальное состояние необходимо, когда данные должны быть доступны и синхронизированы между несколькими компонентами. Выбор между локальным и глобальным состоянием зависит от архитектуры приложения и требований к данным.