javascript - 手动更改 DOM，而不是依赖 React 的协调

Question

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

我如何在 React 中包装这样的情节？我可以在 render() 函数中渲染它，但我真的很想使用库的更新代码。有没有什么方法可以覆盖 React 的渲染并进行 DOM 操作以自行更新？

我见过代码覆盖 shouldComponentUpdate 以返回 false，例如 here。这可能行得通，但文档说

Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

此外，我不确定我应该在哪里对状态变化使用react并进行 DOM 操作 - 在 shouldComponentUpdate 或 setState 中？

我知道这有点违背使用 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>
    )
  }

添加图表函数:

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