反应渲染功能防止在每次调用时创建新的画布元素 - Charts.js答案

【问题标题】：React render function preventing creating new canvas element on each time invoked - Charts.js反应渲染功能防止在每次调用时创建新的画布元素 - Charts.js
【发布时间】：2016-11-21 14:46:11
【问题描述】：

我正在使用 React、Charts.js 和 react-chart.js。

我正在发出一个 API 请求，该请求返回我正在可视化的数据。我遇到的问题是，当页面最初加载时，它只显示其中一个名称，然后再次呈现并显示三个名称的完整列表。问题是每次调用渲染函数时都会创建一个新图。

有谁知道是否有办法防止每次都创建新图表，而是覆盖之前创建的图表？

画布被渲染了两次，我猜这是代码设置的方式。在第一个画布元素上它只有一个名称，但在第二个画布上它包含所有三个名称

请看我下面的代码：

var App = React.createClass({
  getInitialState: function() {
    return {
      names: [],
      isLoaded: false
    }
  },
  componentDidMount: function() {
    $.get(url, function(data) {
      this.setState({
        names: data,
        isLoaded: true
      })
    }.bind(this));
  },
  render: function() {
    return ( < div > {
      this.state.isLoaded ? < Graph names = {
        this.state.names
      }
      /> : <div>Still Loading... </div >
    } < /div>)
  }
});

var Graph = React.createClass({

  render: function() {
    var names = [];
    for (var i = this.props.artists.length - 1; i >= 0; i--) {
      names.push(this.props.names[i].name);
    }

    var chartData = {
      labels: names,
      datasets: [{
        data: goals
      }, {
        data: predictions
      }]
    };

    return <LineChart data = {chartData} width = "600" height = "250" / >
  }
});

【问题讨论】：

我不知道... Ract 基于虚拟 DOM... 当它发现从虚拟 dom 到真实 dom 的差异时，它会修补 .. 所以您重新渲染了该图..一种方法（我不知道是否有效）是直接修改dom，使用jquery ...
是复制画布还是重新渲染画布的问题？
@BradBumbalough 两次渲染画布，我猜这是意料之中的。但是在第一个画布上它只有一个名称，但在第二个画布上它包含所有三个名称

标签： javascript reactjs chart.js

【解决方案1】：

我认为问题不在于 React，而在于 ChartJS……它正在获取新信息……但不是更新……而是插入新画布……

尝试设置redraw。

来自文档https://github.com/reactjs/react-chartjs

如果传入组件的数据发生变化，点将在使用 chart.js' .update() 的值。如果你想破坏图表并且在每次更改时重绘，将 redraw 作为道具传入。例如 <LineChart data={this.state.chartData} redraw />

【讨论】：

【解决方案2】：

这听起来像是 React 的预期行为——当状态改变时它总是会重新渲染。您唯一的选择是不将渲染绑定到状态，或者控制是否应该调用更新。在不知道你想要完成什么的情况下，the react-chart docs seem to indicate it won't rerender/redraw the initial Canvas element。

如果您想手动控制组件何时更新，请使用shouldComponentUpdate 方法。

使用shouldComponentUpdate() 让 React 知道组件的输出是否不受当前状态或道具变化的影响。默认行为是在每次状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为。

shouldComponentUpdate: function(nextProps, nextState) {
  // return true to continue with update, false to stop it
  return this.props.names.length == 0 && nextProps.names.length > 0
},

这可能会产生副作用，例如，如果您依赖于其他地方的 props.names 并希望对其进行更新。

【讨论】：