주의 소스 코드에 있는 setState.

이 글에서는 Zusstand 소스 코드의 setState가 어떻게 작성/작동하는지에 대한 리뷰를 제공하겠습니다. 이 개념은 JavaScript 및 화살표 함수의 클로저를 활용합니다.

StoreApi 유형은 간단합니다.

export interface StoreApi<t> {
  setState: SetStateInternal<t>
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}
</t></t>

setState는 두 개의 매개변수를 허용합니다

1. 일부 

2. 교체

Zustand 저장소에 제공되는 예제 데모 앱을 사용하여 실험을 수행해 보겠습니다.

부분 및 교체 내용을 확인하기 위해 dist에 몇 가지 콘솔 문을 추가했습니다.

데모 예시에서 개수를 업데이트할 때의 값은 다음과 같습니다.

여기서 부분은 함수이므로

 

const nextState = typeof partial === "function" ? partial(state) : partial;

자세히 살펴보면 createStore가 실행될 때 상태가 초기화되고 setState 함수 외부에 있습니다. 종소리가 울리나요? Javascript의 클로저를 참조하세요.

partial은 화살표 기능입니다

(state)=>({
    count: state.count + 1
})

이러한 함수는 함수를 반환하므로 매개변수를 사용하여 호출할 수 있다는 점이 장점입니다. 이것이 바로 부분(상태)이 있고 상태가 setState 외부에 있는 이유입니다. setState는 JavaScript의 클로저 덕분에 이 상태 변수에 액세스할 수 있습니다.

브라우저 콘솔에서 아래 코드 조각을 실행하면 매개변수로 전송한 내용이 기록됩니다.

(a => console.log(a))("test")
// Output: test

Object.is 및 Object.ass 사용에 대한 자세한 기사를 작성했습니다. 교체가 null이므로

if (!Object.is(nextState, state)) {
  const previousState = state
  state =
    (replace ?? (typeof nextState !== 'object' || nextState === null))
      ? (nextState as TState)
      : Object.assign({}, state, nextState)
  listeners.forEach((listener) => listener(state, previousState))
}

상태는 Object.Assign을 사용하여 업데이트됩니다. 교체가 null이 아닌 고급 사용 사례를 살펴보고 향후 기사에서 setState가 어떻게 작동하는지 이해하겠습니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배, 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

귀사의 비즈니스에 맞는 맞춤형 웹 시스템을 구축하고 싶으십니까? hello@thinkthroo.com으로 문의하세요

저자 정보:

안녕하세요, 램이에요. 저는 열정적인 소프트웨어 엔지니어/OSS Tinkerer입니다.

내 웹사이트를 확인하세요: https://www.ramunarasinga.com/

참고자료:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L64

2. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

위 내용은 주의 소스 코드에 있는 setState.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!