React:没有州的班级是否仍被视为无国籍/纯粹？

Question

我一直在重构我的应用程序,以制作更多组件无状态/纯组件; 也就是说,它们只是功能.但是,我注意到有些组件需要通过redux store连接mapStateToProps.这导致我做这样的事情:

const someComp = (props) => {
  const {
    funcFromReduxStore,
  } = props;

  return (
    ...
    <SomeComponent
      func={ funcFromReduxStore(myArgs) }
    ...
  );
};

这不起作用,因为我正在执行funcFromReduxStore.一个简单的解决方案是将支柱包裹在箭头功能中.但是,这会导致许多不必要的重新渲染b/c该函数将不受约束.

那么问题就变成了:如何在无状态组件中绑定函数？

如果我使它成为一个没有构造函数的类,并且如下所示创建一个类实例字段,它仍然是无状态的:

class someComp extends React.Component {
  const {
    funcFromReduxStore,
  } = this.props,

  wrapper = (x) => funcFromReduxStore(x) // equivalent way to bind w/ ES8+

  render() {
    ...
    <SomeCompnent
      func={ wrapper(myArgs) }/>
    ...
  }
}

我没有构造函数,也没有状态.我想保持comopnent无状态,但我也想绑定该函数以避免不必要的重新渲染.我还想继续保持无国籍b/c React已经声明将为无国籍的共同体提供性能优势.这是否有资格作为解决方法？

Answer 1

简短的回答，不。无状态功能组件必须是简单的功能。

\n\n

您应该查看一下Recompose库，了解一些非常酷的助手，它们可以帮助您增强 SFC。

\n\n

如果您试图防止不必要的重新渲染，您可以查看onlyUpdateForKeys()或pure()。

\n\n

编辑：所以，我对此进行了更多思考，并发现这篇关于React 组件渲染性能的非常精彩的文章。该文章中与您的问题相关的要点之一：

\n\n

\n

Dan Abramov 表示，无状态组件内部包装在一个类中，目前没有应用任何优化。

\n

\n\n

摘自2016年7月的推文

\n\n

所以看来我错了。“无状态功能组件”目前是类。令人困惑的是，理论上已经出现了性能改进：

\n\n

\n

将来，我们\xe2\x80\x99还能够通过避免不必要的检查和内存分配来针对这些组件进行性能优化。

\n

\n\n

在这一点上，我认为你的问题的答案在很大程度上变得主观。当您创建一个扩展 React 组件的类时，该类的任何实例都会获得setState原型方法。这意味着您有能力设置状态。那么这是否意味着即使您不使用状态它也是有状态的？感谢@Jordan 提供代码链接。SFC 仅在被 React 包装在类中时才在原型上获得渲染方法。

\n\n

对于您想要绑定函数的观点，我认为您想要绑定该函数只有两个原因：

\n\n

\n
1. 授予函数访问this（组件实例）的权限。从你的例子来看，你似乎不需要这个。
\n
2. 确保作为 prop 传递给子组件的函数始终保留相同的标识。你的例子中的功能wrapper似乎没有必要。函数的身份由父组件（或mapStateToProps，或任何 HOC）确定。
\n

\n\n

您还应该看看 React，PureComponent它执行与 recompose 中的 HOC 相同的浅层检查pure()。

\n