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

【问题标题】：How to apply transform to react component without rerendering it?如何在不重新渲染的情况下将变换应用于反应组件？
【发布时间】：2017-04-03 18:26:05
【问题描述】：

我通过状态应用转换来响应 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'
        />
    );
}

这是 react 处理 SVG 的方式并且非常慢吗？或者有没有更好的方法来做这个我错过的操作？

【问题讨论】：

标签： reactjs svg css-transforms

【解决方案1】：

如果您完全控制组件并且您确定不需要重新渲染，那么您可以使用shouldComponentUpdate API https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate 如果您总是返回false，则组件将不会重新渲染并且会离开给你。当然你可以在里面放一些条件逻辑来决定什么时候渲染。

【讨论】：

【解决方案2】：

使用 requestAnimationFrame() 代替 setInterval()。

【讨论】：