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

Применение

Создайте свое глобальное состояние

import { gState } from 'usegstate'

const myGlobalState = gState('hello-world!')

import useGState from 'usegstate'

const YourAwesomeApp = () => {
  const [gState,setGState] = useGState(myGlobalState)
  return (
    <div>{gState}</div>
  )
}

import {GStateProvider} from 'usegstate'

const Wrapper = () => {
  return (
    <GStateProvider>
      <YourAwesomeApp />
    </GStateProvider>
  )
}

Почему бы не React Context API?

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

Мотивация

Мне всегда было любопытно, как работают эти внешние центральные государственные библиотеки, такие как redux , jotai и т. д. Похоже, они используют какую-то сверхспособность, которая позволяет им создавать эти внешние центральные хранилища, которые полностью изолированы от однонаправленного потока реакции.

И после просмотра их огромных исходных кодов я нашел ключ. Одна вещь, которая действительно расширяет широту моих знаний о реакции.

Ключевая идея использования GState — как это работает.

Функции установки состояния React, такие как функция установки useState() или функция отправки useReducer(), могут получать доступ/изменять состояния вне однонаправленного потока реакции.

Проще говоря, мы можем получить/изменить состояние реакции в обычных функциях js, используя эту ключевую идею. Теперь мы можем создать внешнее центральное глобальное хранилище, используя эти функции.

Остальное все просто. Просто реализуйте механизм синхронизации, такой как pub-sub, для подписки на изменения состояния этого глобального хранилища.

useGState — это образовательный пакет, который позволяет разработчикам глубже понять реакцию.

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