Question

我一直在重构我的应用程序，以制作更多组件无状态/纯组件;即，它们只是功能。但是，我注意到某些组件需要通过mapStateToProps与redux存储连接。这导致我做这样的事情：

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

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

你应该看看Recompose库中的一些非常酷的助手，它们可以让你加强你的证监会。

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

编辑：所以，我一直在考虑这个问题，并在React component rendering performance找到了这篇非常棒的文章。该文章中与您的问题有关的要点之一：

根据Dan Abramov的说法，无状态组件内部包含在一个类中，当前没有进行任何优化。

2016年7月

From a tweet

所以看来我错了。＆＃34;无状态功能组件＆＃34; 是类......现在。令人困惑的是，有performance improvements theorized：

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

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

关于想要绑定函数的观点，我只能想到你想要绑定函数的两个原因：

授予函数访问this（组件的实例）的权限。从你的例子来看，你似乎不需要那样。
确保作为prop组件传递给子组件的函数始终保持相同的标识。您的示例中的wrapper函数似乎没有必要。函数的标识由父组件（或mapStateToProps或任何HOC）确定。

你还应该看一下React的PureComponent，它会进行与重构的pure() HOC相同的浅层检查。

React：没有州的班级仍被视为无国籍/纯粹吗？

1 个答案: