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将重新渲染您的组件。

有两种主要方法可以解决这个问题：使用memoized选择器函数（例如Reselect包提供的函数），这样你只需在输入实际改变时重新运行过滤，或者实现{{ 1}}在您的真实组件上实现更智能/更复杂的比较逻辑，例如使用shouldComponentUpdate。

Redux常见问题解答还涵盖了此主题：http://redux.js.org/docs/FAQ.html#react-rendering-too-often

组件什么时候更新？

1 个答案: