React Component Flickers on Rerender

Question

私はかなり新しく反応してこの新しいページの作業に取り組んでいます。基本的に、フィルタオプションを備えたパネルがあり、オブジェクトを色でフィルタリングすることができます。すべて動作しますが、フィルタを選択すると、フィルタパネル全体がちらつくことに気付いています。

ここには、フィルタに直接関係すると思われるフィルタコンポーネントの領域関数と、次にそれらが挿入される親コンポーネントがあります。もともと私がこれを書いていたとき、フィルタコンポーネントはre renderを呼び出していましたが、親がそれをすべて処理するようにリファクタリングしました。ページのページ機能に他の問題を引き起こしていました。当然。それは私の問題のようなものだと思う。すべてのものが渡されてから再レンダリングされます。しかし、私はそれを修正する方法が分かりません。または何が最高です。

は、以前の小道具が親から来る小道具と異なるかどうかをチェックし、そうであれば新しい状態のコピーを作成し、それらのオプションでレンダリングメソッドを呼び出します。この時点ではまだ子コンポーネントにあります。

componentDidUpdate(prevProps, prevState) { 
if (prevState.selectedColorKeys.length !== this.state.selectedColorKeys.length || 
    prevState.hasMatchingInvitation !== this.state.hasMatchingInvitation) { 
    const options = Object.assign({}, { 
    hasMatchingInvitation: this.state.hasMatchingInvitation, 
    selectedColorKeys: this.state.selectedColorKeys 
    }); 
    this.props.onFilterChange(options); 
    } 
} 

は、ユーザーが同じフィルタボタンを使用して、またはその新しいフィルタあれば選択解除することができるように二回

isColorSelected(color) { 
    return this.state.selectedColorKeys.indexOf(color) > -1; 
} 

で状態を設定し、色の名前でフィルタを削除するために呼び出す同じフィルタを選択すると、アクティブなクラスとブロックユーザーを処理しますカラーパネル自体

を作成選択されたカラーキー

filterByColor(color) { 
    if (this.isColorSelected(color.color_name)) { 
    this.removeFilter(color.color_name); 
    return; 
} 
this.setState({ 
    selectedColorKeys: 
    this.state.selectedColorKeys.concat([color.color_name]) 
    }); 
} 

のアレイに色を追加

1. filterByColorがでトリガさ：は

   // color panel 
   colorOptions.map(color => (
       colorPicker.push(
        (<li className={['color-filter', this.isColorSelected(color.color_name) ? 'active' : null].join(' ')} key={color.key} ><span className={color.key} onClick={() => { this.filterByColor(color); }} /></li>) 
       ) 
   )); 
   

   親コンポーネントは

   コールバック私はブレークポイントを配置するときonFilterChange機能

   <ThemesFilter onFilterChange={this.onFilterChange} /> 
   
   
   
   onFilterChange(filters) { 
   const { filterThemes, loadThemes, unloadThemes } = this.props; 
   unloadThemes(); 
   this.setState({ 
       filterOptions: filters, 
       offset: 0 
   },() => { 
       filterThemes(this.state.filterOptions.selectedColorKeys, this.state.filterOptions.hasMatchingInvitation); 
       loadThemes(this.state.offset); 
       }); 
   } 
   

   とフィルタの子を参照し、一般的な流れがあるように思わその色で渡すイベントハンドラ

2. アクティブなクラスがc olorの場合、その色のフィルタータグが生成され、追加されます。
3. componentDidMountは以前のprops/stateを取り込み、それを新しいprops/stateと比較します。一致しない場合、つまり状態が変更された場合、そのオブジェクトのコピーが作成され、変更された状態の新しい状態が割り当てられます。これを親の関数であるonFilterChangeに渡します。
4. onFilterChangeはこれらのオプションをとり、新しいテーマを取得するためのアクションメソッドを呼び出します（バックエンドで実際に行われるフィルタリングは、ページを更新するだけです）。そのオフセットも0に設定されています。これはページのページ機能です。

それは問題は、ブレークポイントを設定し、それがfilterByColorからcomponentDidMountへのステップを経る見た後、componentDidMountがcolorIsSelected場合は、再度確認し、二回をループしていることcomponentDidUpdate機能の周りにあるかもしれないように見える、とすべてを通してそのカラーパネルが一時停止して再レンダリングされ、フリッカーが発生します。

コピーを作成している可能性がありますか？基本的に、isColorSelectedが二重チェックに必要と感じる新しいオブジェクトとして扱われているからです。皆さんのお手伝いが大変ありがとうございます。私の頭の上にはこれほど遠いです。太陽が見えません。

Answer 1

あなたは

componentWillUpdate(nextProps, nextState)