组件何时自行更新

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 函数时都会进行浅相等性检查，将当前返回的对象与之前返回的对象进行比较。 如果两个对象的内容浅相等，则它实际上不会重新渲染"真实"组件。

每当使用数组函数（如 map() 或 filter() 时，都会返回一个新的数组引用。 即使两个数组具有完全相同的内容，将这些数组作为字段的对象也将不再浅相等，因此 React Redux 将重新渲染您的组件。

有两种主要方法可以解决这个问题：要么使用记忆的选择器函数（例如 Reselect 包提供的函数），以便仅在输入实际更改时才重新运行过滤，要么在实际组件上实现shouldComponentUpdate并实现更智能/更复杂的比较逻辑，例如使用 _.isEqual() 。

Redux FAQ 也涵盖了这个主题：http://redux.js.org/docs/FAQ.html#react-rendering-too-often