3 Ansätze zur Integration von Reaktionen mit benutzerdefinierten Elementen

Webkomponenten bieten mit ihrer Portabilität und ihrer Browserkompatibilität überzeugende Vorteile für Webentwickler, insbesondere in großen Organisationen, die konsistente Benutzererfahrungen in verschiedenen Frameworks abzielen. Es gibt jedoch ein häufiges Missverständnis, dass React, eine führende Front-End-Bibliothek, nicht in Webkomponenten integriert ist. Dieser Artikel zerstreut diesen Mythos, indem sie nahtlose Integrationstechniken demonstrieren.

Während die Kompatibilität von React mit Webkomponenten verbessert werden könnte, ist die Behauptung einer schlechten Integration ungenau. Wir werden Best Practices und Einschränkungen untersuchen und Wrapper und benutzerdefinierte JSX -Pragmas erstellen, um eine engere Kopplung zwischen benutzerdefinierten Elementen und Reaktionen zu erreichen.

Integration von React- und Webkomponenten: drei Ansätze

Betrachten Sie React als Malbuch - wir werden Wege untersuchen, um benutzerdefinierte Elemente effektiv zu integrieren und gleichzeitig die Struktur von React zu halten. Wir werden ein einfaches benutzerdefiniertes Element verwenden (erstellt mit Lichte, die zur Leichtigkeit erstellt, aber an maßgeschneiderte Elemente anpassbar sind), das eine Texteingabe an das Shadow DOM anhängt und ein Ereignis für Wertänderungen abgibt. Dieses Element veranschaulicht zwar effektiv die Integrationstechniken, die für komplexere Komponenten anwendbar sind.

Ansatz 1: Verwendung von ref verwendet

Die Dokumentation von React schlägt vor, dass ref zum Zugriff auf Webkomponenten imperativen APIs zugreifen kann. Dies ist notwendig, da das Syntheticevent -System und den deklarativen DOM -Elementzugriff von React von nativen DOM -Ereignissen unterscheiden.

Wir verwenden useRef -Hook von React, um das native DOM -Element zu verweisen, useEffect und useState zu verwenden, um auf den Wert der Eingabe zuzugreifen und zu rendern, sowie den ref , um die Methoden des benutzerdefinierten Elements aufzurufen. Entscheidend ist, dass der useEffect -Block Event -Hörer sorgfältig verwaltet, um Speicherlecks zu verhindern:

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

Dieser Ansatz funktioniert, aber es ist ausführlich und fühlt sich nicht von Natur aus "reagieren" an.

Ansatz 2: Verwenden einer Wrapper -Komponente

Das Erstellen einer React -Wrapper -Komponente vereinfacht die Interaktion. Dieser Wrapper verwaltet den ref , fügt Ereignishörer hinzu/entfernt und bietet eine API für den Zugriff auf nicht zugängliche Elementteile. Eine Requisite, onCustomInput , löst einen Rückruf von der übergeordneten Komponente aus, einschließlich des aktuellen Wertes der ref .

 Funktion coolInput (Requisiten) {
  const ref = useref ();
  const {Kinder, OnCustominput, ... Rest} = props;

  Funktion InvokeCallback (Ereignis) {
    if (onCustominput) {
      OnCustominput (Ereignis, Ref.Current);
    }
  }

  useEffect (() => {
    const {current} = ref;
    Current.AdDeVentListener ('Custom-Input', InvokeCallback);
    return () => {
      Current.RemoveEventListener ('Custom-Input', InvokeCallback);
    };
  });

  zurückkehren<super-cool-input ref="{ref}"> {Kinder}</super-cool-input> ;
}

Diese Methode, zusammen mit generischen Wrappern wie reactifyLitElement , optimiert die Integration.

Ansatz 3: Nutzung von JSX Pragmas

JSX Pragmas bietet eine andere Lösung. Durch den Importieren von jsx-native-events fügen wir einen Requisitenyp hinzu, der Ereignishörer angeschlossen hat. Das onEvent Prefix Triggers Event Listener Addition. Dies erfordert a /** @jsx<pragma_name> */</pragma_name> Kommentar, um die Pragma aufzurufen.

Für die native Eigenschaftsbindung anstelle von ReACT-Requisiten können react-bind-properties verwendet werden.

Der Code für das Pragma ist auf GitHub verfügbar.

Zukünftige Aussichten

Während React 17 ursprünglich für eine verbesserte Kompatibilität für benutzerdefinierte Elemente geplant ist, erscheinen diese Verbesserungen bis zu Version 18 verzögert. Bis dahin sind einige zusätzliche Arbeiten für die vollständige Integration des benutzerdefinierten Elements mit React erforderlich. Hoffentlich werden Future React -Versionen diese Lücke effektiver überbrücken.

Das obige ist der detaillierte Inhalt von3 Ansätze zur Integration von Reaktionen mit benutzerdefinierten Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!