> 웹 프론트엔드 > JS 튜토리얼 > Zustand&#s 소스 코드의 Object.sign() 사용법.

Zustand&#s 소스 코드의 Object.sign() 사용법.

WBOY
풀어 주다: 2024-09-05 06:39:32
원래의
571명이 탐색했습니다.

이 기사에서는 Zustand의 소스 코드에서 Object.ass()가 어떻게 사용되는지 이해할 것입니다.

Object.assign() usage in Zustand

위의 코드 조각은 바닐라.ts에서 가져온 것입니다. 상태를 설정할 때 Object.Assign이 상태 개체를 업데이트하는 데 사용됩니다.

먼저 Object.sign의 기본 사항을 이해해 보겠습니다.

객체.할당()

Object.sign() 정적 메소드는 하나 이상의 소스 객체에서 열거 가능한 모든 고유 속성을 대상 객체로 복사합니다. 수정된 대상 객체를 반환합니다.

1

2

3

4

5

6

7

8

9

10

const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

 

const returnedTarget = Object.assign(target, source);

 

console.log(target);

// Expected output: Object { a: 1, b: 4, c: 5 }

 

console.log(returnedTarget === target);

// Expected output: true

로그인 후 복사

대상 객체의 b 값이 소스 객체의 b 값으로 대체됩니다.

정말 간단하죠? 이제 몇 가지 실험을 실행하고 Zusstand의 setState가 Object.sign() 메소드를 활용하는 방법을 이해해 보겠습니다.

Zustand 소스 코드의 Object.sign():

1

2

3

4

5

6

7

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

state = (replace != null ?

              replace :

              typeof nextState !== "object" ||

              nextState === null) ?

                nextState :

                Object.assign({}, state, nextState);

로그인 후 복사

위 코드 조각에는 중첩된 삼항 연산자가 있습니다. 교체가 null이 아니면 상태가 교체되거나 nextState가 객체가 아닌 경우 nextState를 있는 그대로 반환하지만 우리가 관심 있는 것은 Object.sign({}, state, newState)입니다.

먼저 상태를 업데이트할 때 상태와 nextState에 무엇이 있는지 로그하고 살펴보겠습니다. 내가 선택한 예는 Zustand 소스 코드의 데모 예에서 나온 것입니다. 콘솔 문을 삽입하고 이러한 실험을 실행할 수 있도록 코드를 약간 수정했습니다.

Object.assign() usage in Zustand

Object.assign() usage in Zustand

이 간단한 예에서는 개수가 증가하면 Object.sign을 사용하여 상태 개체를 업데이트하게 됩니다.

다음번에 JSON 개체에 대한 일부 업데이트를 수행하려고 할 때 Object.sign을 사용하세요.

회사 소개:

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#L76

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

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

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿