javascript - 如何通过react-redux connect使用React.memo？

Question

有人知道当使用react-redux中的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 返回的函数需要传递一个组件，因此会出现错误:

Uncaught Error: You must pass a component to the function returned by connect. Instead received {"compare":null}

Answer 1

React.memo 只是一个 HOC，所以你可以使用:

没有备注:

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

带备注:

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

甚至换行连接:(这应该是连接的解决方案)

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

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