React Context Composer를 캡슐화하기 위한 세부 단계(공유)

이 글은 composer튜토리얼 칼럼에서 React Context Composer를 캡슐화하는 방법을 단계별로 소개하기 위해 작성한 글입니다. 필요한 친구들에게 도움이 되길 바랍니다!

React Context Composer를 단계별로 어떻게 캡슐화하나요?

Motivation

React에는 Redux, Mobx, Recoil 등 많은 상태 관리 솔루션이 있습니다. 아직까지 Redux만 경험해 봤기 때문에 아직은 조금 번거롭다고 생각합니다. 나는 일반적으로 많은 Hook을 작성하기 때문에 상태를 쉽게 분할하고 결합할 수 있는 useContext 후크와 함께 Context Provider를 사용하는 것을 선호합니다. 여기서는 각 상태 관리 솔루션의 장단점을 논의하지 않고 Context를 사용할 때 발생하는 다중 계층 중첩 문제에 중점을 둡니다.

아래 사진은 제가 최근 작성하고 있던 taro + React Hooks + TS 프로젝트에서 추출한 코드의 일부입니다. 일부 전역 상태를 분할한 다음(분할의 목적은 불필요한 다시 렌더링을 줄이는 것임) 중첩했습니다. 이런 글을 쓰다 보면 콜백 지옥에 지배당하는 느낌이 생각나는데, 그게 굉장히 불편해요. 그래서 고차 부품을 직접 봉인하고 구조를 글쓰기 측면에서 '평탄화'하는 방법을 생각했습니다.

<LoadingContext.Provider value={{ loading, setLoading }}>
  <UserDataContext.Provider value={{ name: "ascodelife", age: 25 }}>
    <ThemeContext.Provider value={"light"}>
    {/* ....more Providers as long as you want */}
    </ThemeContext.Provider>
  </UserDataContext.Provider>
</LoadingContext.Provider>

가장 쉬운 솔루션

여기서 저는 ReduceRight를 사용하여 Provider 중첩을 완료하는 첫 번째 솔루션을 빠르게 작성했습니다.

여기서 Reduce 대신에 ReduceRight를 사용한 이유는 외부 레이어에서 내부 레이어로의 쓰기 순서에 더 익숙하기 때문입니다.

// ContextComposer.tsx
import React from 'react';
type IContextComposerProps = {
  contexts: { context: React.Context<any>; value: any }[];
};
const ContextComposer: React.FC<IContextComposerProps> = ({ contexts, children }) => {
  return (
    <>
      {contexts.reduceRight((child, parent) => {
        const { context, value } = parent;
        return <context.Provider value={value}>{child}</context.Provider>;
      }, children)}
    </>
  );
};
export default ContextComposer;
// App.tsx
<ContextComposer
  contexts={[
    { context: ThemeContext, value: "light" },
    { context: UserDataContext, value: { name: "ascodelife", age: 25 } },
    { context: LoadingContext, value: { loading, setLoading } },
  ]}>
    { children }
</ContextComposer>

실제 경험을 통해 사용할 수는 있지만 개발 경험이 조금 더 나쁘다는 것을 알았습니다. 문제는 구성 요소가 매개 변수를 입력할 때 전달된 값이 any 유형이라는 것입니다. 이는 ts의 정적 유형 확인이 중단됨을 의미합니다. 매개변수를 전달할 때 값에 대해 정적 유형 검사가 수행되지 않으므로 코드를 입력할 때 코드 프롬프트가 표시되지 않을 뿐만 아니라 상대적으로 낮은 수준의 런타임 오류가 발생할 수도 있습니다. 나쁜 리뷰!

React.cloneElement()를 기반으로 한 변환 계획

위 솔루션을 변환하기 위해 상대적으로 인기가 없지만 사용하기 쉬운 함수인 React.cloneElement()를 발견했습니다. 이 함수에 대해 주목할 만한 점은 많지 않습니다. 주로 세 가지 입력 매개변수를 살펴보세요. 첫 번째는 상위 요소이고, 두 번째는 상위 소품이고, 세 번째는 나머지 매개변수입니다. 첫 번째 매개변수. 이를 제외한 다른 모든 값은 선택사항입니다.

예:

<!-- 调用函数 -->
React.cloneElement(<div/>,{},<span/>);
<!-- 相当于创建了这样一个结构 -->
<div> 
    <span></span>
</div>

그런 다음 변환을 시작해 보겠습니다. ReduceRight 프레임은 변경되지 않은 상태로 유지됩니다. 입력 매개변수 유형과 ReduceRight 콜백을 변경합니다.

// ContextComposer.tsx
import React from 'react';
type IContextComposerProps = {
  contexts: React.ReactElement[];
};
const ContextComposer: React.FC<IContextComposerProps> = ({ contexts, children }) => {
  return (
    <>
      {contexts.reduceRight((child, parent) => {
        return React.cloneElement(parent,{},child);
      }, children)}
    </>
  );
};
export default ContextComposer;
// App.tsx
<ContextComposer
  contexts={[
      <ThemeContext.Provider value={"light"} />,
      <UserDataContext.Provider value={{ name: "ascodelife", age: 25 }} />,
      <LoadingContext.Provider value={{ loading, setLoading }} />,
  ]}>
    { children }
</ContextComposer>

변환 후 매개변수를 전달하면 실제로 컴포넌트를 생성하는 것처럼 보입니다(물론 실제로 컴포넌트가 생성되지만 컴포넌트 자체는 가상 Dom에 렌더링되지 않습니다. 실제로 렌더링되는 것은 생성된 이후입니다.) 복제되었습니다.) 동시에 우리가 방금 집중했던 값의 정적 유형 검사 문제도 해결되었습니다.

팁: React.cloneElement(parent,{},child)는 React.cloneElement(parent,{children:child})와 동일합니다. 이유를 알고 계시나요?

관련 자료

소스 코드가 github(https://github.com/ascodelife/react-context-provider-composer)에 동기화되었습니다.

npm Warehouse(https://www.npmjs.com/package/@ascodelife/react-context-provider-composer)에도 패키징되어 있으니 직접 경험해 보세요.

위 내용은 React Context Composer를 캡슐화하기 위한 세부 단계(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!