Staat 소스 코드의 Object.is() 사용법.

이 글에서는 Zustand의 소스 코드에서 Object.is() 메소드가 어떻게 사용되는지 살펴보겠습니다.

위 코드 조각은 바닐라.ts에서 따온 것입니다

Object.is() 메소드는 setState에서 사용됩니다(나중에 이에 대한 추가 기사).

먼저 Object.is() 메소드가 무엇인지 알아보겠습니다.

Object.is()

Object.is() 정적 메서드는 두 값이 동일한 값인지 확인합니다.

아래 예는 MDN Docs에서 선택되었습니다.

    console.log(Object.is('1', 1));
    // Expected output: false

    console.log(Object.is(NaN, NaN));
    // Expected output: true

    console.log(Object.is(-0, 0));
    // Expected output: false

    const obj = {};
    console.log(Object.is(obj, {}));
    // Expected output: false

다음은 약간 복잡한 JSON 예입니다.

    const jsonObject1 = {
        name: "foo",
        age: 30
    };

    const jsonObject2 = {
        name: "bar",
        age: 30
    };

    console.log(Object.is(jsonObject1, jsonObject2)); // false

Object.is()가 false를 반환하는 이유는 무엇입니까?

jsonObject1과 jsonObject2의 내용이 동일하더라도 메모리에서는 서로 다른 객체입니다. JavaScript에서는 객체가 내용이 아닌 참조로 비교됩니다. 이 두 객체는 ​​서로 다른 메모리 위치에 저장되므로 Object.is()는 false를 반환합니다.

Object.is(nextState, 상태)

Zustand의 아래 코드 조각에서 Object.is() 메서드는 상태 업데이트를 진행하고 리스너에게 알리기 전에 nextState가 현재 상태와 실제로 다른지 여부를 확인하는 데 사용됩니다. 이 확인은 성능을 높이고 불필요한 상태 업데이트를 방지하는 데 중요합니다.

    const setState: StoreApi<TState>['setState'] = (partial, replace) => {
      // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
      // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
      const nextState =
        typeof partial === 'function'
          ? (partial as (state: TState) => TState)(state)
          : partial
      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.is()의 작동 모습을 보여줍니다

위의 로그 문을 추가하기 위해 pnpm run build 명령을 사용하여 Zustand를 컴파일하고 dist를 example/demo/src에 복사했습니다. 해킹된 것처럼 보이지만 Zustand가 내부적으로 어떻게 작동하는지 실험하고 파악하고 있습니다.

    const useStore = create((set) => ({
      count: 1,
      inc: () => set((state) => ({ count: state.count + 1 })),
    }))

inc를 호출하면 어떻게 해서든 setState가 트리거됩니다. 다음 기사에서 그 방법을 알아 보겠습니다.

회사 소개:

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

고급 아키텍처 개념을 연습하고 모범 사례를 배우고 프로덕션급 프로젝트를 구축하여 코딩 기술을 향상하세요.

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

Next.js 프로젝트에 도움이 필요하십니까? hello@thinkthroo.com으로 문의하세요

저자 소개:

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

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

참고자료:

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

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is

위 내용은 Staat 소스 코드의 Object.is() 사용법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!