반응을 맞춤 요소와 통합하기위한 3 접근법

휴대 성과 브라우저 호환성을 갖춘 웹 구성 요소는 웹 개발자, 특히 다양한 프레임 워크에서 일관된 사용자 경험을 목표로하는 대규모 조직에서 강력한 이점을 제공합니다. 그러나 선도적 인 프론트 엔드 라이브러리 인 React는 웹 구성 요소와 잘 통합되지 않는 일반적인 오해가 존재합니다. 이 기사는 원활한 통합 기술을 보여줌으로써 그 신화를 없애줍니다.

React의 웹 구성 요소와의 호환성이 향상 될 수 있지만 통합 불량의 주장은 부정확합니다. 모범 사례와 제한 사항을 탐색하고 포장기와 맞춤 JSX Pragmas를 만들어 사용자 정의 요소와 React 간의 더 엄격한 커플 링을 달성합니다.

React 및 웹 구성 요소 통합 : 세 가지 접근 방식

반응을 색칠 공부로 고려하십시오 - 우리는 반응의 구조를 준수하면서 사용자 정의 요소를 효과적으로 통합하는 방법을 모색합니다. 텍스트 입력을 Shadow Dom에 첨부하고 값 변경에 대한 이벤트를 방출하는 간단한 사용자 정의 요소 (편의성을 위해 구축되었지만 문자 제작 요소에 적응할 수 있음)를 사용합니다. 이 요소는 기본적이지만보다 복잡한 구성 요소에 적용 가능한 통합 기술을 효과적으로 보여줍니다.

접근 1 : ref 활용

React의 문서는 ref 사용하여 웹 구성 요소 명령 API에 액세스 할 것을 제안합니다. 이는 React의 Syntheticevent 시스템 및 선언 DOM 요소 액세스가 기본 DOM 이벤트와 다르기 때문에 필요합니다.

우리는 React의 useRef 후크를 사용하여 기본 DOM 요소, useEffect 및 useState 참조하여 입력의 값에 액세스하고 렌더링하고 사용자 정의 요소의 메소드를 호출하는 ref 를 참조합니다. 결정적으로, useEffect 블록은 이벤트 리스너를 신중하게 관리하여 메모리 누출을 방지합니다.

 useeffect (() => {
  CoolInput.current.addeventListener ( 'Custom-Input', EventListener);
  return () => {
    CoolInput.current.removeEventListener ( 'Custom-Input', EventListener);
  };
});

이 접근법은 효과가 있지만, 장점이며 본질적으로 "반응과 같은"느낌이 들지 않습니다.

접근 2 : 래퍼 구성 요소 사용

반응 래퍼 구성 요소 생성은 상호 작용을 단순화합니다. 이 래퍼는 ref 관리하고 이벤트 리스너를 추가/제거하며 비 반응 접근성 요소 부품에 액세스하기위한 API를 제공합니다. 발자국, onCustomInput 상위 구성 요소에서 콜백을 트리거하며, 선택적으로 ref '의 현재 값을 포함합니다.

 함수 coolinput (props) {
  const ref = useref ();
  const {children, oncustominput, ... rest} = props;

  함수 invokecallback (이벤트) {
    if (oncustominput) {
      OnCustomInput (이벤트, ref.current);
    }
  }

  useeffect (() => {
    const {current} = ref;
    current.addeventListener ( 'custom-input', invokecallback);
    return () => {
      current.removeEventListener ( 'Custom-Input', invokecallback);
    };
  });

  반품<super-cool-input ref="{ref}"> {어린이들}</super-cool-input> ;
}

이 방법은 reactifyLitElement 와 같은 일반적인 랩퍼와 함께 통합을 간소화합니다.

접근 3 : JSX Pragmas 활용

JSX Pragmas는 또 다른 솔루션을 제공합니다. jsx-native-events 가져 오면 이벤트 리스너를 첨부하는 소품 유형을 추가합니다. onEvent Prefix는 이벤트 리스너 추가를 유발합니다. 이를 위해서는 /** @jsx<pragma_name> */</pragma_name> 필요합니다 /** @jsx<pragma_name> */</pragma_name> Pragma를 호출하려는 댓글.

RECT PROP 대신 원시 속성 결합의 경우, react-bind-properties 사용할 수 있습니다.

Pragma 코드는 Github에서 제공됩니다.

미래의 전망

React 17은 처음에 개선 된 사용자 정의 요소 호환성을 위해 계획된 반응이지만, 이러한 개선은 버전 18까지 지연되는 것처럼 보입니다. 그때까지 React와의 전체 사용자 정의 요소 통합을 위해서는 일부 추가 작업이 필요합니다. 미래의 React 버전이 이러한 격차를보다 효과적으로 연결할 수 있기를 바랍니다.

위 내용은 반응을 맞춤 요소와 통합하기위한 3 접근법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!