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

发布时间：2020-12-15 05:07:14 所属栏目：百科来源：网络整理

导读：我一直在重构我的应用程序,以制作更多组件无状态/纯组件;即,它们只是功能.但是,我注意到某些组件需要通过mapStateToProps与redux存储连接.这导致我做这样的事情： const someComp = (props) = { const { funcFromReduxStore,} = props; return ( ... SomeCom

我一直在重构我的应用程序,以制作更多组件无状态/纯组件;即,它们只是功能.但是,我注意到某些组件需要通过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已经声明将为无国籍的共同体提供性能优势.这是否有资格作为解决方法？

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

你应该看看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.

2016年7月From a tweet

所以看来我错了. “无状态功能组件”现在是类……令人困惑的是,有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组件的类时,您的类的任何实例都会获得setStateprototype方法.意味着你有能力设置状态.即使你没有使用状态,这是否意味着它是有状态的？感谢@Jordan的link to the code.SFC只有在React包装在类中时才会在原型上获得一个render方法.

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

>赋予函数访问权限(组件的实例).从您的示例来看,您似乎并不需要这样.
>确保作为prop组件传递给子组件的函数始终保持相同的标识.您的示例中的包装函数似乎是不必要的.函数的标识由父组件(或mapStateToProps,或任何HOC)确定.

您还应该看看React的PureComponent,它执行与重构的pure()HOC相同的浅层检查.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!