ReactとjQueryの併用のメリット・デメリット

Question

巷の記事では、Jqueryで出来ることはReactで出来ので併用はいらない、パフォーマンスが下がるという事ですが、DOM操作だけにとどまらず、ちょとした動きをつける歳、生のjsよりJqueryの方が記述量が少ないと思うのですが、併用するメリットとデメリットを教えてもらえませんか

Reactベースの実装です。

Answer 1

Jqueryで出来ることはReactで出来ので併用はいらない、パフォーマンスが下がる

そういう問題では済みません。ReactはVirtual DOMライブラリという性質上、jQueryなどReact外の手段で直接DOMを書き換えてしまうと、「React内で把握している仮想DOMの構造」と「実際のDOM構造」が違ってしまって、DOMの反映が破綻します。

どうしてもjQueryなどを使いたければ、jQueryプラグインを入れる部分を<div>などでくるんで、componentDidMountとcomponentWillUnmountで書き換えることで対応は可能です。

Integrating with DOM Manipulation Plugins - React公式

Answer 2

Reactの構成にもよりますが、例えばフルSPA、routingもすべてreact-router-domなどで行なった場合、jqueryとの併用は非常に難しいと思います。
また、基本的にはSSRで一部分だけReactで管理したい場合などはjqueryとの併用は仕組みを理解すれば可能です。

maisumakunさんも仰ってますが、Reactアプリケーションでは、React内でのデータとして持っている仮装DOM構造を元にviewを生成します。

Reactの例

例えばuserのリストをレンダリングするパターンだとします。
this.stete.usersにユーザーのリストを定義
#jsUserListにrenderする

// データの例
class Users extends React.Component{
  constructor(props){
    super(props)
    this.state.users = [
      {name: '太郎', age: 20},
      {name: '花子', age: 19},
    ]
  }
  render(){
    return(
      <div className="users">
        {{
          this.state.users.map(user => {
            return(
              <div className="user">
                <div className="user-name">{{user.name}}</div>
                <div className="user-age">{{user.age}}</div>
              </div>
            )
          })
        }}
      </div>
    )
  }
}
//renderする（文法間違ってたらごめんなさい）
ReactDOM.render(
  <User />,
  document.getElementById('jsUserList')
)

そうすると以下のようにレンダリングされます。

<div id="jsUserList">
  <div class="users">
    <div class="user">
      <div class="user-name">太郎</div>
      <div class="user-age">20</div>
    </div>
    <div class="user">
      <div class="user-name">花子</div>
      <div class="user-age">21</div>
    </div>
  </div>
</div>

jqueryを使用する（Reactで生成したDOMに対して）

さて、今.usersの中に.userのリストが入っていますよね。
これに対してjqueryを使用して各ユーザーの名前を書き換えてみましょう。

var $users = $('.user');
$users.each(function(){
  $(this).find('.users-name').text('書き換えた名前')
})

こうすると、テキストは書き換わります。

この場合、Reactが持っているデータの名前は太郎と花子です。
しかし、実際にviewに反映されているのは書き換えた名前です。

jqueryを使用してデータを書き換えると、viewの内容は更新されるので書き換わりますが、reactのデータを書き直した瞬間にもとに戻ってしまいます。

このように実際にDOMが持っているものとReactが持っているものが違う、しかしデータが更新されるとReactはレンダリングを行なってしまうので、viewを書き換えるjqueryとデータを保持し、データを元にviewを書き換えるReactでは同じ場所で共存することは出来ません。

jqueryを使用する（Reactで生成した以外のDOMに対して）

さて、共存が不可能と書きましたが、同じ場所に対してjqueryとReactを併用することは基本的に難しいです。
しかし、renderを囲っている#jsUserListやそれを囲っている要素に関してはReactで管理されていないので可能です。

例えば先ほどの例で'#jsUserList'に対してjqueryを使って$('#jsUserList').fadeIn()などすると普通に動きます。（もしかしたらもう1階層上しか無理かも。。。）

なので併用というとちょっと語弊があるかもしれませんが、Reactでrenderした部分以外であれば併用は可能です

Reactでレンダリングjqueryを使用したい場合（どうしても）の注意

しかし、どうしてもjqueryでイベントをバインディングしたいなどの場合があるかと思います。
その場合の注意は、普通に$('.user').on('click', function(){})のようにイベントをセットすると動かないという点です。

jqueryは要素に対してイベントを付与します。
つまり、jqueryが読み込まれた際に要素があるのが大前提です。
しかし、ReactやAngularやknockout, vueなど、jsに保持しているデータを元にviewをレンダリングしていくようなものだと、突然要素が追加されたりするのでjqueryのイベントが付与されていない要素が現れます。

なので、jqueryでセットしたはずのイベントがでない！クリックが反応しない！などが起こります。

なのでそういうのを防ぐために以下のようにrenderには関係ない要素にイベントをセットし、クリックイベントが伝搬してきたときにイベントが呼ばれるようにしてください。

$('#jsUserList').on('click', '.user', function(){
  
})

これは、Reactなどに限らずAngular, vue, knockoutや他のフレームワーク、jqueryのみのアプリケーションでajaxで追加した要素にイベントを付与するのにも必要です。

結論

Reactでレインダリングしている部分に対してjqueryを併用することは非常に難しいですし、界隈を見てると明らかにアンチパターンな気がします。
ちょっとした動きなどはjqueryでやるのではなく、cssのアニメーションを使用し、classの付け替えなどで実現するほうがいいと思います。

長くなってしまってスイマセン_(:3 」∠ )_