Javascript ReactJS设计模式-类与自定义组件

我正在尝试使用React更熟悉最佳实践和设计模式，我有一个问题，关于两个类似的解决方案中哪一个是正确的：

第一个解决方案使用了一个不扩展组件的类，它的构造函数返回一个基于对象的元素集，看起来更简洁，代码也更少

类PostEntryElement{
构造函数（postObjectArray）{
返回(
postObjectArray.map（（postObject，index）=>{
返回(

作者：{postObject.Author}，
正文：{postObject.Body}，
已创建：{postObject.Created}，
标题：{postObject.Title}

)
})
)
}
}
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
例如APIBlogPostResponse：[
{
标题：“标题1”，
正文：“正文1”，
作者：“作者1”，
已创建：“已创建1”
}, {
标题：“标题2”，
正文：“正文2”，
作者：“作者2”，
已创建：“已创建2”
}, {
标题：“标题3”，
正文：“正文3”，
作者：“作者3”，
已创建：“已创建3”
}
]
};
}
render（）{
返回(
见以下所有帖子：
{ 
this.state.exampleApiBlogPostResponse&&
新的PostEntryElement（this.state.exampleAPIBlogPostsResponse）
}
);
}
}
React.render（，document.getElementById（'container'）
如果您的组件不需要维护任何状态，请使用
无状态组件
它们是纯函数，可以使用道具和呈现ui

PostEntryElement
组件作为无状态组件

const PostEntryElement = (props) => {
        return (
      postObjectArray.map((postObject, index) => {
        return (
          <li style={{marginTop: '20px'}}>
            Author: {postObject.author}, 
            Body: {postObject.body},
            Created: {postObject.created},
            Title: {postObject.title}
          </li>
        )
       })
     )
}

constPostEntryElement=（道具）=>{
返回(
postObjectArray.map（（postObject，index）=>{
返回(

作者：{postObject.Author}，
正文：{postObject.Body}，
已创建：{postObject.Created}，
标题：{postObject.Title}

)
})
)
}

如果出于任何原因您的组件需要状态，则使用有状态组件

在React中，您的状态应该由容器组件管理。容器通常应该是扩展组件的类。表示组件应该是无状态纯函数，根据容器提供的属性进行呈现

如果您感兴趣，这是一个很好的反应介绍，以及组件应该如何相互交互。
我将像您是我团队中的另一名开发人员一样来处理这一问题，我希望使用您的代码。这基本上与您在一年内返回代码并再次使用它是一样的

简言之，解决方案2更好，尽管仍然不完美。原因如下：

1） 调试。如果您没有使用React开发工具，您应该尝试一下。他们会让你更好地了解React的工作原理。但简言之：React希望能够完全控制所有组件。它希望能够在内部创建类的实例（通过
new
）。使用
new
自己创建视图的任何部分通常是一件坏事，这会使问题更难追踪

2） 与#1有关。首选组件而不是“浮动标记”。在React中，您可以在任何地方抛出JSX，但应始终确保标记属于特定组件。在您的第一个示例中，您创建了一个新类型的类，它不是一个组件，现在我必须先了解您希望我如何使用它。我的工作量越大，臭虫的面积就越大。这就是为什么会有标准。使用组件

3） 在第一个示例中，非组件返回元素列表。但实际上

组件必须返回单个根元素

（见附件）。这就是@aeid的解决方案不能正常工作的原因。我想他根本没注意到。我真的不怪他。他被这种糟糕的做法吓坏了。这是React所期望的，也是所有React开发人员所期望的。请注意，如果您首先使用一个真正的组件并强迫自己遵守标准，那么这个问题就永远不会发生

4） 宁愿升级工具也不要降级代码。我想你希望解决方案#1更好，因为这样你就不必两次列出“作者”、“正文”、“已创建”和“标题”。你猜怎么着？在Babel中启用ES2017将为您提供对象排列“运算符”。所以你可以这样做：

<PostEntryElement {...postObject} />


Ahhh，因此将其作为一个函数而不是扩展的自定义组件保留，但由于它不需要状态操作，所以不要使用构造函数和初始化？哇，我非常感谢您提供了如此全面的答案！非常感谢。