d3.js グラフィックを Facebook React アプリケーションに統合する適切な方法はありますか? 質問する

一つの戦略としては、Reactに更新させないブラックボックスコンポーネントを構築することが考えられます。コンポーネントライフサイクル方式は、shouldComponentUpdate()コンポーネントが再レンダリングが必要かどうかを独自に判断できるようにすることを目的としています。いつもこのメソッドから戻るとfalse、React は子要素に飛び込むことはありません (つまり、 を呼び出さない限りforceUpdate())。そのため、これは React のディープ アップデート システムに対する一種のファイアウォールとして機能します。

最初の呼び出しでrender()チャートのコンテナを作成し、componentDidMount()メソッド内でD3を使用してチャート自体を描画します。その後は、Reactコンポーネントの更新に応じてチャートを更新するだけです。想定でそのようなことを行う場合shouldComponentUpdate()、そこからD3アップデートを呼び出すことができない理由はないと思います（Reactコンポーネントのコードを参照してください）。_performUpdateIfNecessary()）。

したがって、コンポーネントは次のようになります。

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});