リアクションコンポーネントを再レンダリングせずにトランスフォームを適用する方法はありますか？

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

あなたは完全にコンポーネントを制御していて、再レンダリングの必要はあなたがコンポーネントが再描画しませんし、あなたにそれを残して、常にfalse返すならば、あなたはshouldComponentUpdate API https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdateを使用することがないことが確実な場合。もちろん、条件付きロジックを内部に配置し、レンダリングするタイミングを決定することもできます。

Answer 2

setInterval（）の代わりにrequestAnimationFrame（）を使用してください。