React で jQuery を適切に使用する

jQuery は、JavaScript 開発者が使用する最も有名なライブラリの 1つです。

ライブラリは、いくつか例を挙げると、DOM 操作とアニメーションを実行する簡単な方法を提供します。その人気のために、多くの Web 開発者はそれに精通しており、可能な場合は jQuery を使用することを好みます。

React は、Facebook によって開発されたもう 1つの人気のあるライブラリです。過去数年間で、最も広く使用されている JavaScript フレームワークの称号を獲得しました。

それは間違いなくより現代的であり、jQuery よりも多くの機能を備えています。1つのアプリケーションで両方のライブラリを使用できますが、React アプリケーション内で jQuery を使用するためのルールがあります。

React で jQuery を使用できますか

jQuery を適切に使用し、その配置を慎重に選択する限り、React アプリで jQuery を使用することができます。同様に、React を jQuery に埋め込むことができます。

React での jQuery の制限は何ですか

React で jQuery を使用する主な制限は、jQuery が手動で DOM を更新することです。一方、React には DOM に変更を加えるためのシステムがあります。

React アプリまたはコンポーネントをいつ再レンダリングするかを内部的に決定します。また、UI のどの部分を更新する必要があるかを判断します。

したがって、jQuery を使用して DOM を操作すると、React は混乱します。そのため、通常の状況では、React で jQuery を使用することは悪い習慣と見なされますが、例外があります。

React で jQuery を使用する正しい方法

まず、jQuery ライブラリをインストールしてから、次のようにインポートする必要があります。

import $ from 'jquery';

すでに述べたように、jQuery と React は DOM 操作に関係する 2つのライブラリです。jQuery が React に干渉しないようにするには、React によって更新されないコンポーネントを作成する必要があります。

どうすればいいのでしょうか？ご存知のように、React コンポーネントは、state や props が変更されると再レンダリングします。そこで、state や props を持たないコンポーネントを作らなければなりません。

例を見てみましょう：

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

React が App コンポーネントの DOM を更新しないようにするために、状態を開始したり、prop 値を使用したりすることはありません。return ステートメントは、静的ラッパー要素と段落要素で構成されています。

このようにして、jQuery プラグインが DOM を操作し、すべての段落要素を直接非表示にする方法を明確にすることができます。

DOM 要素を直接選択するもう 1つの良い方法は、ref を使用することです。

React で jQuery を使用する必要があります

React には、ほとんどの場合 DOM を操作できる機能が組み込まれています。React コンポーネントのフレームワーク内で作業することで、アプリケーションの動作と外観を制御できます。

jQuery を使用する必要があり、上記の制限内にとどまることが確実な場合は、自由に使用できます。ただし、jQuery には React 内のアプリケーションのセットが限られています。