如何将 React.memo 与 react-redux connect 一起使用？

Question

有人知道如何使用 --- connect React.memo 包装 React 组件吗？

例如，您将如何修改以下内容？

 let Button = (props: Props) => (
  <button onClick={props.click}>{props.value}</button>
);

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

我试过了：

 let Button = React.memo((props: Props) => (
  <button onClick={props.click}>{props.value}</button>
));

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

但是， connect 返回的函数需要传递一个组件，因此它会出错：

未捕获的错误：您必须将组件传递给 connect 返回的函数。而是收到 {“compare”:null}

原文由 Ryc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

同样的问题在这里。通过将 react-redux 升级到版本 5.1.0 来修复。

原文由 Maxime Chéramy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

React.memo 只不过是一个 HOC，所以你可以使用：

没有备忘录：

 connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

备忘：

 connect(
  mapStateToProps,
  mapDispatchToProps
)(React.memo(Button));

甚至包装连接：（ 这应该是连接的解决方案）

 React.memo(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Button)
);

就像我们对 withRouter 所做的那样： withRouter(connect(...)())

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议