重新选择如何影响组件的呈现

Question

我真的不明白重新选择如何减少组件的渲染。这是我在没有重新选择的情况下拥有的：

const getListOfSomething = (state) => (
  state.first.list[state.second.activeRecord]
);
const mapStateToProps = (state, ownProps) => {
  console.log(state.first.list, state.second.activeRecord);
  return {
    ...ownProps,
    listOfSomething: getListOfSomething(state)
  }
};

它根据某个值复合了某个列表中的元素。每次状态中的任何内容更改时都会调用 Render，例如我的 console.log 输出：

{}, ""
{}, ""
{}, ""
{}, "1"
{"filled", "1"}

因为商店的不同部分正在发生一些事情。因此，组件被渲染 5 次，其中 2 次冗余。

但是使用重新选择：

const getList = state => state.first.list;
const getActiveRecord = state => state.second.activeRecord;
const listOfSomething = (list, activeRecord) => {
  console.log(list, activeRecord);
  return list[activeRecord];
}
const getListOfSomething = createSelector(getList, getActiveRecord, listOfSomething);
const mapStateToProps = (state, ownProps) => {
  console.log(state.first.list, state.second.activeRecord);
  return {
    ...ownProps,
    listOfSomething: getListOfSomething(state)
  }
};

这是我的第一个选择器console.log输出：

{}, ""
{}, "1"
{"filled", "1"}

第二种：

{}, ""
{}, ""
{}, ""
{}, "1"
{"filled", "1"}

并且组件正确渲染 - 3 次！

为什么会这样？为什么组件只渲染了 3 次？这到底是怎么回事？

Answer 1

React-Redux的connect函数依赖于浅相等比较。 每次存储更新并且组件的mapState函数运行时，连接的组件都会检查返回对象的内容是否更改。 如果mapState返回了不同的内容，则包装的组件必须重新呈现。

重新

选择使用"记忆"，这意味着它保存了最后输入和输出的副本，如果它连续两次看到相同的输入，它将返回最后一个输出而不是重新计算内容。 因此，如果输入没有更改，基于 Reselect 的选择器函数将返回相同的对象引用，这意味着connect更有可能看到没有任何不同，并且包装的组件不会重新呈现。

请参阅新的 Redux FAQ 部分关于不可变数据，了解有关不可变性和比较如何与 Redux 和 React-Redux 一起工作的更多信息。