如何在不重新渲染的情况下应用变换反应组件？

Question

我正在通过状态应用转换来对SVG组件做出反应，但随后它经常重新渲染，一切都滞后了。所以现在我试图避免状态更新并使用变换转换，它再次非常缓慢和笨重。

componentDidMount() {
    let circleElem = this.refs.circ;
    let offset = 0;
    setInterval(() => {
        offset++;
        circleElem.style.transform = "translate("+offset+"px, 0)";
    }, 100);
}



render() {
    return (
        <circle
            {...this.props.attributes}
            ref='circ'
        />
    );
}

这是反应处理SVG的方式而且非常慢吗？或者有没有更好的方法来完成我失踪的这项操作？

Answer 1

如果您完全控制该组件，并且您确定无需重新呈现，那么您可以使用shouldComponentUpdate API https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate如果您始终返回false该组件将不要退缩，而是留给你。当然，您可以在内部放置一些条件逻辑并决定何时渲染。

Answer 2

使用requestAnimationFrame（）而不是setInterval（）。