javascript - 为什么我的 redux 容器在不相关的状态发生变化时呈现？

Question

我的 redux 状态是这样的:

{ 
  entities: {
    cars: {
      byId: {},
      isFetching: true
    },
    persons: {
      byId: {},
      isFetching: false
    }  
  }
}

我的个人容器:

class PersonPageComponent extends React.PureComponent<
  IPersonPageProps & InjectedAuthRouterProps,
  {}
> {
  render() {
    console.log('render´);
    return (<p>helllo</p>);
  }
}

const mapStateToProps = (state: RootState, ownProps: { title: string }) => ({
  list: _.values(state.entities.persons.byId), // personsSelector(state)  
});

export const PersonPage = userIsAuthenticated(
  connect<IPersonPageProps, {}, {}>(
    mapStateToProps
  )(PersonPageComponent)
);

当我在 entities.cars 下的 redux 状态发生变化时，为什么我的 Person 容器会重新渲染？自“实体”更改后是否应该触发渲染？ GET_CARS 操作设置 entities.cars.isFetching = true。这会导致在 PersonComponent 中重新渲染吗？

Answer 1

state.entities.persons 在更新 cars 之后可能是同一个对象，但是 _.values(state.entities.persons.byId) 每次执行都会生成一个新对象——_.values 不会缓存/重用其结果，即使输入保持不变也是如此。

由于提供给 PureComponent 的 Prop 现在是一个不同的对象(即使内容相同)，也会触发重新渲染。