避免 React 从之前的 props 更新中透支答案

【问题标题】：Avoid React overdrawing from previous props update避免 React 从之前的 props 更新中透支
【发布时间】：2018-03-15 03:49:11
【问题描述】：

下面我将描述通过点击我的应用程序的NavItem 触发的事件序列：

我有一个 ControlledTabs React 组件，它有一个子 MarkerGenesChart，它有一个子 ScatterChart。在最顶层的ControlledTabs 组件内，从一个NavItem 切换到另一个我调用setState()，它在MarkerGenesChart 中触发componentWillReceiveProps()，因为它修改了我传递给它的一些道具。然后，MarkerGenesChart 在其componentWillReceiveProps 中调用setState()，触发子ScatterChart 的componentWillReceiveProps。问题是操作switching the NavItem 导致我的最子元素ScatterChart 调用componentWillReceiveProps() 两次：一次用于最顶层组件，另一次用于中间组件。第一次触发ScatterChart用旧数据绘制图表，第二次添加更新而不删除旧数据。

这是我如何更新ScatterChart 组件中的数据：

    d3.select(node)
        .datum(data_func);
    chart.update();

我正在使用nvd3scatterChart，它有nv.utils.windowResize(chart.update);。当我只是调整窗口大小时，一切都变得像我想要的那样。在添加新数据之前如何清理数据？或者也许我应该是 this.forceUpdate()，但我几乎在所有地方都尝试过，但无法正常工作。

任何建议将不胜感激。

更新

我可以通过引入一个全局计数器并计算在ScatterChart 中调用componentWillReceiveProps() 的次数来部分解决它，但这显然是错误的方法。

【问题讨论】：

标签： javascript reactjs nvd3.js

【解决方案1】：

chart.update();
this.forceUpdate();

不建议调用 forceUpdate()，但这是迄今为止最简单的方法。

【讨论】：

【解决方案2】：

我在componentDidUpdate() 和componentWillReceiveProps() 中都绘制了图表，因为如果我不这样做，我的一些功能会被破坏。 componentWillReceiveProps 正在绘制旧数据，然后componentDidUpdate() 正在添加新数据。这就是我遇到问题的原因，而不是因为componentWillReceiveProps 被调用了两次。我完全删除了componentWillReceiveProps 并修复了我的应用程序中因该删除而损坏的其他部分。

【讨论】：

你从来没有在 componentDidUpdate 中绘制过任何东西，它是在 render() 函数中绘制的。
是的，但我调用的是函数 createScatterChart，它使用 render 绘制图表。
其实我不确定。我正在使用createScatterChart 直接修改DOM。即使我直接访问DOM 并在那里添加/删除元素，它仍然被React 劫持并由render() 方法绘制？