Aptor만 있으면 됩니다.

TLDR

주요 패키지react-something는 타사 및 해당 타사의 각 기존 API에 대해 새로운 항목을 정의하는 반응 래퍼를 포함하는 이전 스타일 클래스 기반 통합을 기반으로 합니다. 사용 가능한 가장 좋은 방법은 react ref 시스템을 통해 통합 간격을 채우는 ref를 바인딩하는 것입니다.

우리는 반응 패키지의 중간 효과를 완전히 제거하고 통합 메커니즘만을 기반으로 하는 새로운 간단한 패키지인 react-aptor 를 제안합니다.

이야기

doom.js라는 최신 비디오 패키지가 최근에 npm에 등장했다고 가정해 보겠습니다. Doom 패키지는 모든 프레임워크 및 라이브러리와 호환되는 TypeScript로 개발되었습니다. 이제 커뮤니티는 작성자를 돕고 자체적으로 통합 패키지를 만들려고 합니다 🙌️.

간단하게 해보자. 지금은 doom이 비디오를 재생/일시 정지만 할 수 있습니다. "Breakthrough of the year"를 수상할 만큼 멋지지 않을 수도 있지만 확실히 최고 중 하나입니다 😄.

그런 다음 react-doom 라는 반응 패키지를 만들 것입니다. 다음과 같이 될 것입니다.

<ReactDoom 
    src={'video-url'}
    isPlaying={false} 
    ref={playerRef}
/>

그런 다음 사용자는 playerRef.current를 사용하여 UI로 비디오를 재생/일시 중지할 수 있습니다.

모든 것이 괜찮습니다. doom.js에 투표율이 높은 새 기능을 추가하여 비디오 속도를 변경해 보겠습니다.

작성자가 코딩을 시작합니다.
붐💥
저자는 기능을 완료
현재 테스트를 진행 중입니다.
모든 테스트 통과 🕺
Doom.js가 게시될 예정입니다.
오호호환도 된다
새로운 마이너 버전이 출시됩니다…
완료 🆗

이제 react-doom 패키지를 업데이트하고 비디오에서 새로운 2x 기능을 사용해 봅시다.Published 25 days ago , 알겠습니다. 문제를 확인하겠습니다. doing 보드 아래에 있어야 합니다.
작성자의 마지막 상호 작용은 2 months ago입니다.
그래서 뭐, 또 다른 올드 가이 PC 밈 만들기!

앱터

반응 래퍼가 패키지의 개발 단계를 차단해야 하는 이유는 무엇입니까?

doom.js를 react-aptor 에 연결하면 모든 기능을 사용할 수 있습니다.
연결된 구성 요소 주위에 작은 래퍼를 사용합니다. 원하는 다음을 모두 수행하십시오.

useEffect를 사용하여 소품 변경 트리거

이름 변경

doom.js를 사용하는 원시forwardRef API에 대한 전체 액세스 참조 호이스트

이 새로운 반응 패키지raptor-doom라고 부르겠습니다.
raptor-doom은 개발자가 반응 패키지 자체와 독립적으로 사용할 수 있도록 도와주는 간단하고 작은 조각입니다.

따라서 2x 기능의 경우 필요한 유일한 것은 doom.js 패키지를 업데이트하고 속도 기능을 즉시 사용하는 것입니다.

<RaptorDoom isPlaying={isPlaying} ref={ref} />
<button onClick={() => {ref.current._doom.setRate(2)}}>
 speed up
</button>

react-aptor는 이 프로세스를 하나의 반응 후크 호출만큼 쉽게 만드는 데 도움이 됩니다.

const Connector = (props, ref) => {
  const aptorRef = useAptor(ref, {
    // a function which returns a slice of doom.js apis
    getAPI, 
    // a function which instantiate doom.js player
    instantiate, 
    // anything to be used in both getAPI, instantiate
    params: props 
  });

  // accessing node using returned ref
  return <div ref={aptorRef} />; 
};

examples 참조: 1분 이내에 react-aptor를 사용하여 반응하도록 연결합니다.

react-howler의 raptor-howler 및 1.04kB 기능 버전을 참조하십시오.

많은 모범 사례가 포함된 자세한 설명서를 참조하십시오here.

결론

react-aptor는 반응 내에서 기능적이고 작은 순방향 호환 패키지를 만드는 데 도움이 됩니다.