Question

我想创建一个包含复杂渲染API的React组件。此API可以将绘图呈现为HTML + SVG，还提供了使用新数据更新绘图的功能。更新功能已经过优化，可以避免创建或更改不需要的元素（就像React的协调算法一样）。

如何在React中包含这样的情节？我可以在@PowerMockIgnore ("javax.crypto.*")函数中渲染它，但我真的想使用库的更新代码。有没有办法覆盖React的渲染并进行DOM操作以自行更新？

我看到代码覆盖render()以返回shouldComponentUpdate，例如here。这可能会奏效，但文件说

请注意，将来React可能会将false视为提示而非严格指令，并且返回shouldComponentUpdate()仍可能导致重新呈现组件。

另外，我不确定在false或shouldComponentUpdate中我应该在哪里对状态更改做出反应并进行DOM操作？

我知道这有点违背使用React的目的，但我认为它仍然有用。我可以将我的组件放在其他组件中，他们不必知道实现细节，等等。

对于好奇，我正在使用的绘图库是JSROOT。

Answer 1

我已经使用NVD3（也是图表库）做了类似的事情。我的方法是：

在渲染内部，只需在其中留下一个带有唯一ID的svg
在ComponentDidMount或其他调用图表库的外部函数中调用函数，并直接更改DOM。

示例：

componentDidMount() {
    this.addGraph(this.props)
  }

render() {
    const { id, height } = this.props
    return (
      <div className={ styles.graph } ref="graphDiv">
        <svg
          id={`Graph-${id}` }
          style={ { height } }
        />
      </div>
    )
  }

addGraph函数：

export default function addGraph({ data, height, width }) {
  const d3 = require('d3')
  const nv = require('nvd3')

 nv.addGraph(() => {
    const chart = nv.models.multiBarChart()
      .x(d => d[0])
      .y(d => d[1])
      .height(height)

 d3.select('#' + 'Graph' + '-' + id)
      .datum(data)
      .call(chart)

 return chart
 })
}

手动进行DOM更改，而不是依赖React的对帐

1 个答案: