reactjs - React JS がブラウザをフリーズさせる

Question

2000 個の要素を持つ React コンポーネントがあり、いくつかのフィルター条件に基づいて状態を更新すると、内部的に再レン​​ダリングが発生します。すべてがうまくいっているようです。しかし、2000 個の要素から 1000 個の要素に切り替えるようにトグルフィルターを切り替えると、レンダリングに時間がかかり、ブラウザーがフリーズすることがあります。私は chrome タイムライン プロファイリングを行いました。時間のかかる主な部分はレンダリングです。どんな助けでも大歓迎です。

Answer 1

簡単な修正は、子コンポーネントが〜2000回レンダリングされているかどうかに関係なく、 shouldComponentUpdate See the docsを実装することです。

shouldComponentUpdate: function(nextProps, nextState) {
  return this.props.value !== nextProps.value;
}

もう 1 つの簡単なチェックは、小さなステートレスな子を使用し、小道具のみを渡すという規則に従っているかどうかを自問することです。そうでない場合は、リファクタリングの時期かもしれません。