Reactでrerenderを防ぐために不変の小道具を作る方法？

Question

私はreact.jsを使って小さなアプリを作りました。私は過度に 'パフォーマンス'を考慮に入れます。

私は "Spinner"という名前の単純な子コンポーネントを持っています。私の目標は、このコンポーネントが決して再レンダリングしないようにすることです。ここで

は私のコンポーネントです：

import React, {PureComponent} from 'react'; 

export default class Spinner extends PureComponent { 

render() { 
    return (
     <div className="spinner"> 
      <div className="bounce1"></div> 
      <div className="bounce2"></div> 
      <div className="bounce3"></div> 
     </div> 
    ) 
} 

} 

「反応-アドオン-PERF」で再レンダリングの時間では、コンポーネントは常に私がPureComponentを使用しています、レンダリングされた私は、そのコンポーネントをレンダリングしたいので、私は不変の小道具を使うことができると私は読むが、これを可能にする方法を知らない。

私はこれまでのようないくつか作る場合：

componentDidMount() { 
    this.renderState = false; 
} 

shouldComponentUpdate(nextProps, nextState) { 
    return (this.renderState === undefined) ? true : this.renderState; 
} 

を1つだけの時間をレンダリングしているが、私はより良い方法があると信じています。

再レンダリングを避けるにはどうすればよいですか？または多分私は不変の小道具を作ることができますか？

Answer 1

コンポーネントを再レンダリングしたくないので、componentShouldUpdateの追加ロジックは必要ありません。小道具を必要としないステートレスなコンポーネントについて

shouldComponentUpdate(nextProps, nextState) { 
    return false 
} 

Answer 2

、我々はFunctional（ステートレス）コンポーネントを組み合わせて使用​​することができ、そしてバベルのReact constant elements transformerに：これだけは再レンダリングにコンポーネントを防ぐのに十分なはずの追加

コンポーネントの作成を最適化し、再レンダリングを完全に防止します。

1. React constant elements transformerをビルドシステムに追加します。トランスdocs意志に従って：React.createElement、得られ 割り当てへの呼び出しを低減完全 静的であるサブツリーの最上位に

   ホイスト要素の作成、。さらに重要なことは、サブツリーが に変更されていないことをReactに伝えるため、リアクションはリコンサイル時に完全にスキップできます。

2. ステートレスコンポーネントにスピナーを変更します。

   const Spinner =() => (
       <div className="spinner"> 
       <div className="bounce1"></div> 
       <div className="bounce2"></div> 
       <div className="bounce3"></div> 
       </div> 
   ); 
   
   export default Spinner; 
   

Answer 3

あなたはListsにあなたの配列の小道具を変換するためにImmutable JSを使用することによって反応し、オブジェクトの小道具はMapsをint型であなたの小道具を不変にすることができます。このライブラリを使用すると、簡単なチェック（代わりに平等のためのキー/値を通過するの）配列/オブジェクトの等価性をチェックするために使用することができます。

shouldComponentUpdate(nextProps) => { 
    this.props.complexObjectAsMap === nextProps.complexObjectAsMap 
} 

をしかし、あなたのコンポーネントがすべての小道具を持っていないので - これはしていません正しい質問を見てください。あなたの場合、私はOri Drori答えに行くだろう。