javascript – 有什么正确的方法来整合d3.js图形到Facebook React应用程序?

是的,我知道有反应艺术,但it seems to be broken

问题是,d3.js都是关于变化浏览器DOM,并直接使用它,如在componentDidMount方法内部,将无法正常工作,因为对浏览器DOM的所有更改都不会反映在React的虚拟DOM中。有任何想法吗?

最佳答案
一个策略可能是构建一个你从不让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;
    }
});

请注意,您需要在componentDidMount()方法(第一个渲染)以及shouldComponentUpdate()(用于后续更新)中调用图表。还要注意,您需要一种方法来将组件属性或状态传递给图表,并且它们是特定于上下文的:在第一个渲染中,它们已经在this.props和this.state上设置,但是在以后的更新中新的属性尚未在组件上设置,因此您需要使用函数参数。

参见jsfiddle here

转载注明原文:javascript – 有什么正确的方法来整合d3.js图形到Facebook React应用程序? - 代码日志