コンポーネントはいつ更新されますか？

Question

私が知る限り、新しいpropが受け取られると、コンポーネントはshouldComponentUpdate機能に基づいて更新されます。私は以下のコンテナを持っています：

私はreduxを使用しています。私はcontainerの中に次のものを持っています。

function filterQuestions(allQuestions, answeredQuestions) { 
    var filtered = _.reject(allQuestions, (q) => _.contains(answeredQuestions, q.question.id)) 
    return [...filtered] 
} 

const mapStateToProps = (state) => {  
    return { 
    questions: filterQuestions(state.questions.questions, state.questions.answeredQuestions), 
    } 
} 

私の意図はcomponent更新のみを接続していることであるときfilterQuestions(...)の出力が変化します。ただし、グローバルstoreに変更があるたびにコンポーネントが更新されます。 filterQuestionsを取り除き、単にstate.questionsを渡すと、予想される動作が示されます。

filterQuestionsの使用に間違いがあると私は推測していますが、問題の原因がわかりません。誰かが私のためにそれを特定できますか？

Answer 1

React Reduxパッケージは、mapStateToProps関数を呼び出すたびに浅い等価チェックを行い、現在返されているオブジェクトと以前に返されたオブジェクトを比較します。 2つのオブジェクトの内容が等しくない場合、実際には "実際の"コンポーネントを再レンダリングしません。

map()またはfilter()のような配列関数を使用する場合は、新しい配列参照を返します。 2つの配列の内容がまったく同じであっても、それらの配列をフィールドとして持つオブジェクトはシャローイコールにならないため、React Reduxはコンポーネントを再描画します。

これを処理するには、2つの主な方法があります：入力が実際に変更、またはあなたの本当のコンポーネントにshouldComponentUpdateを実装しているときにのみ再実行するようにフィルタリング（例えばReselectパッケージで提供されるものなど）メモ化セレクター機能を使用しますか_.isEqual()を使用するなど、スマートで複雑な比較ロジックを実装できます。

Redux FAQもこのトピックをカバーしています。http://redux.js.org/docs/FAQ.html#react-rendering-too-often