Reactガイドを読んでいくその50

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

他のライブラリとのインテグレーション

他のビューライブラリとのインテグレーション

Backbone View に React を組み込む

Backbone ViewはHTML文字列を生成するテンプレート用関数を使ってDOMの要素の中身を作成する。

backbonejs.org

qiita.com

View の役割は大きく分けて2つあります。
特定の DOM element を監視し、それを根とする部分木で起こったイベントへの処理を管理する
その部分木に対する DOM 操作

この処理をReactに置き換えるのも比較的簡単にできる。
置き換えには昨日も出ていたReactDOM.render()を使用する。

function Paragraph(props) {
  return <p>{props.text}</p>;
}

const ParagraphView = Backbone.View.extend({
  render() {
    const text = this.model.get('text');
    ReactDOM.render(<Paragraph text={text} />, this.el);
    return this;
  },
  remove() {
    ReactDOM.unmountComponentAtNode(this.el);
    Backbone.View.prototype.remove.call(this);
  }
});

Reactツリーからコンポーネントが削除されるとクリーンアップは自動的に実行されるが、ツリー全体を手動で削除するために、イベントハンドラとコンポーネントツリーに関連付けられていたその他のリソースを解除することが大切。

少ないけれど、今日はここまで。