class - react : Are classes without state still considered stateless/pure?

Question

我一直在重构我的应用程序以使更多组件成为无状态/纯组件；也就是说，它们只是函数。但是，我注意到某些组件需要通过 mapStateToProps 与 redux 存储连接。这导致我做这样的事情:

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

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

这不起作用，因为我正在执行 funcFromReduxStore。一个简单的解决方案是将 prop 包装在箭头函数中。但是，这会导致许多不必要的重新渲染，因为函数不会被绑定(bind)。

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

如果我将其设为一个没有构造函数的类，并像这样创建一个类实例字段，它是否仍然是无状态的:

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

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

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

我没有构造函数，也没有状态。我想保持组件无状态，但我也想绑定(bind)函数以避免不必要的重新渲染。我还想继续保持无状态，因为 React 已经声明无状态组件将会带来性能优势。这是否可以作为解决方法？

Answer 1

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

您应该看看 Recompose库提供了一些非常酷的助手，可以让您增强您的 SFC。

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

编辑:因此，我对此进行了更多思考，并在 React component rendering performance 上发现了这篇非常棒的文章。 。该文章中与您的问题相关的要点之一:

Stateless components are internally wrapped in a class without any optimizations currently applied, according to Dan Abramov.

From a tweet 2016年7月

看来我错了。 “无状态功能组件”暂时是类。令人困惑的是，已经有 performance improvements theorized :

In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

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

就您想要绑定(bind)函数的观点而言，我认为您想要绑定(bind)该函数只有两个原因:

1. 为函数提供对 this(组件实例)的访问权限。从你的例子来看，你似乎不需要这个。
2. 确保作为 prop 传递给子组件的函数始终保留相同的标识。您的示例中的 wrapper 函数似乎没有必要。函数的标识由父组件(或 mapStateToProps，或任何 HOC)确定。

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