Question

有人使用react-redux的React.memo函数时，有人知道如何用connect包装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返回的函数希望传递一个组件，因此会出现以下错误：

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

Answer 1

同一问题。通过将react-redux升级到版本5.1.0进行了修复。

Answer 2

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

没有备忘录：

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

带有备忘录：

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

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

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

就像我们对withRouter一样：withRouter(connect(...)())

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 demo

如错误消息所述，您需要将组件从connect传递给返回的函数。
（这意味着connect()()中的第二对（）对） / em>

当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。

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

4 个答案:

Codesandbox demo