容器组件不好？应该直接使用 store.getState 和 store.dispatch 吗？

Question

在 React 中，它判断是否需要重新渲染的方法 -dom 是通过测试 objects/functions.

的引用

因此在每次更新时都会计算所有 JS。意思是每次容器元素 return 两个全新的对象，一个用于 maptDispatchToProps，一个用于 mapStateToProps:

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

在上面的代码中，我们每次都看到一个包含 active 键的新对象，然后是一个包含新函数到 onClick 的新对象。对这 3 个的引用在每个 js 周期中都是全新的。 React 会比较这些引用，然后重新计算组件中的 js。但是我认为使用 redux 不需要测试 shouldComponentUpdate，当所有这 3 个引用都更改时，怎么会这样呢？尤其是 onClick，这将引起对 removeEventListener 的反应，然后用 addEventListener.

再次添加 onClick

Answer 1

您误解了 "shallow equality" 的工作原理。 React 的 PureRenderMixin 和 React Redux 的 connect 函数都使用 "shallow equality" 来确定是否确实发生了变化。这意味着比较两个对象的 顶级值 以查看每对值是否 === 相等，而不是比较 对象本身 是一样的。所以，如果我有：

var a = {q : 42};
var b = {a : a};
var c = {a : a};

那么B和C是截然不同的对象，但是是浅等价的，因为对他们来说，"a"字段指向同一个对象。

此外，在 React Redux 的 connect() 函数中，它主要检查 mapStateToProps 的 return 值以查看包装组件是否需要更新。

容器组件不好？应该直接使用 store.getState 和 store.dispatch 吗？

Container components are bad? Should use store.getState and store.dispatch directly instead?

reactjs

redux

react-redux