反応を統合する3つのアプローチカスタム要素と

特に、さまざまなフレームワークにわたる一貫したユーザーエクスペリエンスを目指している大規模な組織で、ポータビリティとブラウザの互換性を備えたWebコンポーネントは、Web開発者に魅力的な利点を提供します。ただし、主要なフロントエンドライブラリであるReactがWebコンポーネントとうまく統合しないという一般的な誤解が存在​​します。この記事は、シームレスな統合技術を実証することにより、その神話を払拭します。

ReactのWebコンポーネントとの互換性を強化することはできますが、統合が不十分であるという主張は不正確です。ベストプラクティスと制限を探り、ラッパーとカスタムJSXプラグマを作成して、カスタム要素とReactの間のより緊密な結合を実現します。

ReactとWebコンポーネントの統合：3つのアプローチ

Reactを塗り絵と考えてみましょう。ColoringBook -Reactの構造を順守しながら、カスタム要素を効果的に統合する方法を探ります。 Shadow DOMにテキスト入力を添付し、値の変更に関するイベントを発する単純なカスタム要素（Litelementで構築されますが、カスタム構築要素に適応できます）を使用します。この要素は、基本的には、より複雑なコンポーネントに適用可能な統合技術を効果的に示しています。

アプローチ1： refを利用しています

Reactのドキュメントは、 refを使用してWebコンポーネントの命令APIにアクセスすることを示唆しています。 ReactのSyntheticeVentシステムと宣言的なDOM要素アクセスがネイティブDOMイベントとは異なるため、これが必要です。

ReactのuseRefフックを使用して、ネイティブDOM要素を参照し、 useEffect 、 useState入力の値にアクセスしてレンダリングし、 refカスタム要素のメソッドを呼び出します。重要なことに、 useEffectブロックは、イベントリスナーを慎重に管理して、メモリリークを防止します。

 effect（（）=> {
  coolinput.current.addeventlistener（ 'custom-input'、eventlistener）;
  return（）=> {
    coolinput.current.removeeventlistener（ 'custom-input'、eventlistener）;
  };
}）;

このアプローチは機能しますが、冗長であり、本質的に「反応のように」感じられません。

アプローチ2：ラッパーコンポーネントを採用します

Reactラッパーコンポーネントを作成すると、相互作用が簡素化されます。このラッパーは、 refを管理し、イベントリスナーを追加/削除し、非反応性のない要素部品にアクセスするためのAPIを提供します。小道具onCustomInput 、 refの現在の値を含む親コンポーネントからのコールバックをトリガーします。

関数coolinput（props）{
  const ref = useref（）;
  const {children、incustominput、... rest} = props;

  関数invokecallback（event）{
    if（oncustominput）{
      Oncustominput（event、ref.current）;
    }
  }

  effect（（）=> {
    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プラグマの活用

JSXプラグマは別のソリューションを提供します。 jsx-native-eventsをインポートすることにより、イベントリスナーを添付するプロップタイプを追加します。 onEvent Prefixはイベントリスナーの追加をトリガーします。これには、a /** @jsx<pragma_name> */</pragma_name>が必要です/** @jsx<pragma_name> */</pragma_name>プラグマを呼び出すためのコメント。

React Propsの代わりにネイティブの特性結合の場合、 react-bind-properties使用できます。

プラグマのコードはGitHubで入手できます。

将来の見通し

React 17は最初にカスタム要素の互換性を改善するために計画していましたが、これらの改善はバージョン18まで遅れているように見えます。それまで、Reactとの完全なカスタム要素統合にはいくつかの追加作業が必要です。うまくいけば、将来のReactバージョンがこのギャップをより効果的に埋めることを願っています。

以上が反応を統合する3つのアプローチカスタム要素との詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。