Existe-t-il un moyen approprié d'intégrer d3.graphiques js dans L'application Facebook React?

Une stratégie pourrait être de construire un composant de boîte noire que vous ne laissez jamais React mettre à jour. La méthode du cycle de vie des composants shouldComponentUpdate() est destinée à permettre à un composant de déterminer lui-même si un réenroulement est nécessaire ou non. Si vousrenvoyez toujours false à partir de cette méthode, React ne plongera jamais dans les éléments enfants (c'est-à-dire, sauf si vous appelez forceUpdate()), donc cela agira comme une sorte de pare-feu contre le système de mise à jour profonde de React.

Utilisez le premier appel à render() pour conteneur pour le graphique, puis dessinez le graphique lui-même avec D3 dans la méthode componentDidMount(). Ensuite, il suffit de mettre à jour votre graphique en réponse aux mises à jour du composant React. Bien que vous ne puissiez pas supposé faire quelque chose comme ça dans shouldComponentUpdate(), Je ne vois aucune raison réelle de ne pas pouvoir appeler la mise à jour D3 à partir de là (voir le code du composant React _performUpdateIfNecessary()).

Donc votre composant ressemblerait à ceci:

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;
    }
});

Notez que vous devez appelez votre graphique à la fois dans la méthode componentDidMount() (pour le premier rendu) ainsi que dans shouldComponentUpdate() (pour les mises à jour ultérieures). Notez également que vous avez besoin d'un moyen de transmettre les propriétés ou l'état du composant au graphique, et qu'ils sont spécifiques au contexte: dans le premier Rendu, ils ont déjà été définis sur this.props et this.state, mais dans les mises à jour ultérieures, les nouvelles propriétés ne sont pas encore définies sur le composant, vous devez donc utiliser

Voir le jsfiddle ici.