javascript - 使用 React.JS 获取和缓存 SVG 节点边界框的最佳方法

我正在渲染一个带有标签的 SVG 组件。这些标签组件需要根据它们的文本内容（从而影响它们的大小）正确布局，以避免相互重叠。

要获得每个标签的真实大小，每次标签内容更新时似乎都需要进行双重渲染。

在标签组件级别，我需要

• 第一次呈现它
• 检索真实 SVG DOM 节点的边界框
• 为了性能原因缓存边界框
• 重新渲染组件以根据其缓存的边界框调整标签位置

然后，在每次重绘时：

• 根据缓存的边界框渲染
• 比较前一个和更新后的属性中的标签内容，如果有变化：
• 更新并缓存标签边界框
• 根据更新和缓存的边界框重新渲染

到目前为止，我是这样实现我的标签组件的：

var Label = React.createClass({

  updateBBox: function() {
    // Trigger re-rendering
    this.setState({
      bbox: this.getDOMNode().getBBox()
    });
  },

  componentDidMount: function() {
    // Will trigger a re-rendering at mount
    this.updateBBox();
  },

  componentDidUpdate: function(prevProps, prevState) {
    // If content has changed, re-render
    if (this.props.content !== prevProps.content) {
      this.updateBBox();
    }
  },

  render: function() {
    // Render according to size from current bounding box if any cached
    // ...
  }

});

所以，我的问题不是关于算法，而是是否有更符合 React 的方式来实现这一点。使用 state 来缓存这种缓慢的“计算”或 DOM 访问在 React 的方式中是否被允许？双重渲染对于 React 来说是一个不寻常的情况吗？

答案＃1

我个人的意见是，你应该把对你重要的所有状态放入组件的状态中。所以，是的，你提出的方式是正确的做法。

据我所知，双重渲染是获取块大小作为状态的唯一方式，因为块需要先被绘制。由于 React 性能非常高，这通常不是问题。如果确实有问题，你可以在子组件中使用 PureRenderMixin 或其他对 shouldComponentUpdate 的检查来确保性能。

但是请注意，将其写成混入可能是明智的，因为“不要重复自己”。

我经常做响应式 SVG 的工作，所以我经常需要从一个块元素（svg 或 html）获取 x、y、宽度和高度。

我写了这个叫做 BoundingRectAware 的小混入：

var shallowEqual = require('react/lib/shallowEqual');

// keep width and height of an element. You must make a "boundingRectTarget" ref
// to the element you would like to track
module.exports = {
    getInitialState: function() {
        return {rect: {
            left: null, top: null, right: null, bottom: null, width: null, height: null
        }};
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
        this.updateDimensions();
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    },
    componentWillReceiveProps: function() {
        this.updateDimensions();
    },
    updateDimensions: function() {
        if (this.refs.boundingRectTarget) {
            var rect = this.refs.boundingRectTarget.getDOMNode().getBoundingClientRect();
            if (!shallowEqual(this.state.rect, rect)) {
                this.setState({rect: rect});
            }
        }
    }
};

这可以这样使用：

var FooComponent = React.createClass({
    mixins: [BoundingRectAware],
    render: function() {
        return <div className="foo-class" ref="boundingRectTarget"/>;
    }
});

在 FooComponent 内，你将自动获得 boundingClientRect 作为状态。如果你在多个地方使用 getBBox()，我会实现类似的东西。