React/prefer-stateless-function vs class decorators？答案

【问题标题】：React/prefer-stateless-function vs class decorators?React/prefer-stateless-function vs class decorators？
【发布时间】：2016-12-28 17:38:29
【问题描述】：

所以，我正在建立一个全新的 React 项目，并将我的所有部门更新到最新版本。

这导致了项目中的一些 eslint 损坏，所以我正在经历并纠正这些。

我似乎遇到了相互矛盾的规则。 React/prefer-stateless-function 试图告诉我将我的组件编写为纯函数，但如果我这样做，我将无法再使用装饰器将我的组件连接到我的 Redux 存储。

人们如何解决这个问题？有问题的组件是一个“哑”组件（例如只有道具，没有状态），所以老实说它应该写成一个纯函数，但是我失去了通过@asyncConnect 和@connect 将它连接到我的商店的能力.

带有装饰器的类组件：

@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

纯函数组件：

// How can I use decorators?
export default function UserProfile(props) {
  ...stuff
}

两个装饰器组合的情况：

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState())) {
      return dispatch(loadUser(params.userID))
    }
  },
}])
@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

【问题讨论】：

jamesknelson.com/…

标签： javascript reactjs ecmascript-6 redux eslint

【解决方案1】：

Redux 不需要装饰器来工作，connect 实际上只是一个函数。你可以这样使用它：

export default connect(mapStateToProps)(props => <div />)

【讨论】：

啊，当然。在两个组合装饰器的情况下（我更新了我的帖子），你只会在另一个里面调用一个？
是的，装饰器只是在后台为您执行此操作。将它们用作普通函数时，您需要了解函数实际执行的操作（以及返回的内容）。我认为使用装饰器时也应该如此，否则它太神奇了。
在这种情况下，我无法确定 asyncConnect 或常规连接是否是主要的，或者如何构造函数链。
我没用过asyncConnect，但很快看了就想知道你是否真的需要同时使用connect和asyncConnect？ asyncConnect 不是在后台使用 Redux 的 connect 吗？
我相信是这样，需要做更多的阅读。这直接来自我开始使用的样板。