ReactでjQueryを使用する方法

React は、ユーザー インターフェイスを構築するために Facebook によって開発されたオープンソースの JavaScript ライブラリです。コンポーネントベースの開発モデルを採用しているため、開発者は UI を独立した再利用可能なコンポーネントに分割し、必要に応じて各コンポーネントを更新できるため、コードの保守性と再利用性が向上します。 jQuery は、HTML ドキュメントの操作、イベントの処理、アニメーションの作成、AJAX およびその他の機能を実装するためのよりシンプルな API を提供する JavaScript ライブラリです。この記事では、React で jQuery を使用する方法を説明します。

React プロジェクトで jQuery を使用するには、主に 2 つの方法があります:

1. npm を使用して jQuery をインストールし、それをコンポーネントに導入します

最初に、npm を使用してターミナルに jQuery をインストールする必要があります。コマンドは次のとおりです:

npm install jquery --save

インストールが完了したら、次のように jQuery を使用する必要があるコンポーネントに導入します:

import $ from 'jquery';

その後、それをコンポーネントのライフサイクル関数に追加できます。jQuery の API を使用して、通常の DOM 操作を実行します。たとえば、コンポーネントがレンダリングされた後、次のコードを使用してクリック イベントをボタンにバインドできます。

componentDidMount() {
  $(this.refs.myBtn).on('click', function() {
    console.log('button clicked');
  });
}

React は仮想 DOM を使用するため、jQuery を直接使用して DOM を変更する場合、 React では状態と DOM が同期されていないため、React が提供する setState メソッドを使用して状態を変更する必要があります。その後、React はページを再レンダリングします。

2. jQuery ライブラリを public/index.html に導入する

jQuery ライブラリがプロジェクトの作成時に public/index.html に導入されている場合は、コンポーネント $ 記号を直接使用して、追加の導入やインストールを行わずに jQuery 操作を実行できます。

たとえば、次のコードは、コンポーネントのレンダリング後にクリック イベントをボタンにバインドできます:

componentDidMount() {
  $(this.refs.myBtn).on('click', function() {
    console.log('button clicked');
  });
}

このメソッドは便利に見えますが、次のような用途には適していないことに注意してください。 React アプリケーション: このアプローチは React の仮想 DOM をバイパスするため、使用しないことをお勧めします。

概要:

React と jQuery は 2 つの完全に異なるライブラリです。これらはフロントエンド開発者のさまざまなニーズに合わせて設計されています。ほとんどの場合、相互に置き換えることができますが、同等ではありません。ただし、DOM 上で複雑な操作を実行する必要がある場合など、一部の特殊なケースでは、jQuery を使用する方が便利な場合があります。 React で jQuery を使用する場合、通常の DOM 操作には jQuery の API を使用できますが、React のコンポーネントベースの機能を破壊しないように、React が提供する setState メソッドを使用して状態を変更し、再レンダリングする必要があることに注意してください。可能な限りそのページを参照してください。

以上がReactでjQueryを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。