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

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

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

据我所知，双重渲染是获得块大小作为状态的唯一方法，因为需要先绘制块。由于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 trackmodule.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（），我会实施类似的方法。