使用React.JS检索和缓存SVG节点的边界框的最佳方法

小编典典

使用React.JS检索和缓存SVG节点的边界框的最佳方法

reactjs

我正在渲染带有标签的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兼容的方法来实现这一点。是否使用状态来以React方式缓存这种慢速的“计算”或DOM访问？对于React来说，双重渲染是否不常见？

阅读 317

2020-07-22

共1个答案

小编典典

我个人的观点是，您应该将对您重要的所有状态都放入组件状态。是的，您的建议方法是正确的方法。

据我所知，双重渲染是获得块大小作为状态的唯一方法，因为需要先绘制块。由于React的性能如此出色，因此通常没有问题。如果是，则对子级中的shouldComponentUpdate使用PureRenderMixin或其他检查以确保性能。

但是请注意，将其编写为mixin可能很明智，因为“不要重复自己”。

我经常做响应式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（），我会实施类似的方法。

2020-07-22