Help us understand the problem. What is going on with this article?

React と jQuery は共存可能なのか?

More than 3 years have passed since last update.

jQueryをベースに書かれたフロントエンドをReactで書き直すことを検討中です。
検討の一環として、ReactとjQueryは共存可能か調べたのでメモを残しておきます。

はじめに

Reactはチュートリアルを終えた段階で、まだ理解が浅いです。
その前提で以下お読みいただければ。

そもそも共存が必要なのか?

ReactはVirtualDOMという仕組みを通してDOM操作をするので、jQueryとの相性が悪そうだなというのはなんとなくわかります。

discuss.reactjs.org のjQuery with Reactにおいても

I don't mean to be rude but yes, don't use jQuery. In most cases you won't need anything from jQuery when properly using React.

という回答が寄せられています。

「必要でないなら使わない」というのは原則論としては賛成です。
が、現実としてjQuery plugin に頼りたくなるシチュエーションもあると思われます。

inherited a large application written in jQuery and from that standpoint it's quite logical to have both coexist for a while. Also, there may be libraries that do complex things which you don't want to rewrite in React yourself.

https://discuss.reactjs.org/t/jquery-with-react/683/4

同様な意見もまた、同じトピックに寄せられています。

Reactの見解

Use React with Other Libraries に見解が書かれています。

You don't have to go full React. The component lifecycle events, especially componentDidMount and componentDidUpdate, are good places to put your other libraries' logic.

var App = React.createClass({
  ...

  componentDidMount: function() {
    $(this.refs.placeholder).append($('<span />'));
  },

  componentWillUnmount: function() {
    // Clean up work here.
  },

  ...
});

ReactDOM.render(<App />, mountNode);

必ずしも、全てをReactで書く必要はなく、上の例では jQuery で append しています。

サンプルも同様にjQueryを用いています。

VirtualDOM と Diff Algorithm

2013年と少し古いですが、Reactのdiff algorithm についてFacebook front-endチームの方が書いた記事がありました。
React’s diff algorithm

この仕組みを見る限り、Reactの管理下にあるDOMを破壊あるいは丸っと差し替えることはよろしくなさそうですが、例えば末端ノードに子要素を追加するのは安全そうに思えます。

まとめ

事前サーベイに基づく限りは、必要最低限の箇所に絞って容量用法を正しく守って使えばReactとjQueryは共存可能だと言えそうです。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away