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

Question

有谁知道当使用来自 react-redux 的connect function 时如何用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返回的 function 需要传递一个组件，因此它会出错：

未捕获的错误：您必须将组件传递给连接返回的 function。 而是收到 {"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(...)())

Answer 2

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

Answer 3

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

顺便说一句，我认为在许多HOC中React.memo的正确实现将是最接近组件本身： React.memo的目标是检查组件接收的所有新道具是否与最后的道具。 如果任何HOC转换或添加任何道具到组件 - connect通过将Redux存储映射到道具， 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 4

Codesandbox演示

如错误消息所示，您需要将组件从connect传递给返回的函数。
（表示connect()()的第二对connect()() ）

当React.Memo返回一个组件时，将其传递给connect的第二个函数。
这是你如何做到这一点。

export const MemoizedDemoComponent = connect(mapStateToProps)(React.memo(DemoComponent);

---

演示组件：

import React from "react";
import { connect } from "react-redux";

const DemoComponent = props => (
  <div>
    <p>My demo component fueled by: {props.fuel}!</p>
    <p>Redux: {props.state}</p>
  </div>
);

const mapStateToProps = state => ({
  state: "your redux state..."
});

// create a version that only renders on prop changes
export const MemoizedDemoComponent = connect(mapStateToProps)(
  React.memo(DemoComponent)
);

对于工作示例，还要检查codesandbox 。

Answer 5

对于想知道为什么react-redux抛出此错误的人。

对我来说，我使用了5.0.7版本， react-redux/src/components/connectAdvanced.js line: 92

invariant(
  typeof WrappedComponent == 'function',
  `You must pass a component to the function returned by ` +
  `${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
);

升级后此代码更改为：

invariant(
  isValidElementType(WrappedComponent),
  `You must pass a component to the function returned by ` +
  `${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
);

如何检查WrappedComponent是否更改为isValidElementType(WrappedComponent) ，它由react-is公开

因此，纱线至少将 react-redux 更新为@Maxime react-redux提到的版本