간단한 원자 모델을 사용하여 React에서 Shared Global States를 생성하는 가장 간단한 방법입니다. 이 블로그에서 라이브러리의 사용 및 구현 세부 정보를 찾을 수 있습니다.

용법

글로벌 상태 만들기

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 등과 같은 외부 중앙 상태 라이브러리가 어떻게 작동하는지 항상 궁금했습니다 . 그들은 리액트의 단방향 흐름과 완전히 격리된 이러한 외부 중앙 저장소를 생성할 수 있는 일종의 초능력을 사용하는 것처럼 보입니다.

그리고 그들의 방대한 소스 코드를 검토한 후 열쇠를 찾았습니다. 내 반응 지식의 폭을 넓히는 한 가지.

useGState의 핵심 아이디어 — 작동 방식.

useState()의 setter 함수 또는 useReducer()의 디스패치 함수와 같은 React의 상태 설정자 함수는 react의 단방향 흐름 외부에 있는 상태에 액세스/수정할 수 있습니다.

간단히 말해서 이 핵심 아이디어를 사용하여 일반 js 함수에서 반응 상태에 액세스/수정할 수 있습니다. 이제 이러한 기능을 사용하여 외부 중앙 글로벌 저장소를 만들 수 있습니다.

모든 것이 간단합니다. 이 글로벌 스토어 상태 변경을 구독하기 위해 pub-sub 와 같은 동기화 메커니즘을 구현하기만 하면 됩니다 .

useGState는 개발자가 리액션을 깊이 이해할 수 있도록 하는 교육용 패키지입니다.

이 정보가 도움이 된다면 LinkedIn 에서 저와 연결하여 더 많은 콘텐츠를 확인하세요.