如何使用React.memo与react-redux连接？

Question

React.memo当有人使用connectreact-redux中的函数时,是否有人知道如何包装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}

Answer 1

您的解决方案应该有效（我没有尝试像那样复制粘贴），但您还必须更新react-redux到最新版本。

顺便说一句，我认为React.memo在许多 HOC 中的正确实现应该是最接近组件本身的：目标React.memo是检查组件接收到的所有新 props 是否与最后一个 props 相同。如果任何 HOC 转换或向组件添加任何 props - 这connect是通过将 Redux 存储映射到 props 来实现的，React.memo应该注意它以便决定是否更新组件。

所以我会去做这样的事情：

//import what you need to import

const Component = props => <div>{/* do what you need to do here */}</div>

export default compose(
  connect(mapStateToProps, dispatchToProps),
  /* any other HOC*/
  React.memo
)(Component);

Answer 2

React.memo 只是HOC，所以您可以使用：

没有备忘：

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

带有备忘录：

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

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

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

像我们这样withRouter：withRouter(connect(...)())

Answer 3

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