Javascript 最佳实践会导致容器膨胀和非模块化代码

有人告诉我，最好只对容器使用类，对组件使用函数。因此，容器具有状态，组件是哑函数，它们只在容器之间接收和发送道具

我发现的问题是它会导致容器膨胀。不仅如此，如果一个容器包含许多不同的组件，那么这些容器中的方法是许多不同的不相关功能的混合体

这与将所有内容保持模块化的想法背道而驰。例如，如果我的容器中有一个“submit comment”组件，我希望submitCommentHandler方法也在相关组件中，而不是在Post容器中与大量其他处理程序混合，以实现不相关的功能，例如位于ratePostHandler和userLoginHandler的旁边

---

我是个新手，所以可能我遗漏了一些东西，但如何将这一“最佳实践”与它提出的所有其他问题协调起来？

在你的帖子中有一些误解，可能源于你正在阅读的任何最佳实践文章中的误解

当容器+组件的核心思想开始浮出水面时，许多示例都没有正确实现

// DO NOT DO THIS

let FormComponent = ({ data, handleSubmit }) =>
  <form onSubmit={handleSubmit}>
    {...something with data...}
  </form>

class FormContainer extends React.Component {
  state = { data: [] }
  submitForm = formData => {
    api.post(formData).then(data => this.setState({ data }))
  }
  render() {
    return (
      <div>
        <FormComponent 
          data={this.state.data} 
          handleSubmit={this.submitForm} 
        />
      </div>
    )
  }
}

现在，你有了一个容器，它可以做一件事，可以在你的应用程序中的任何地方重复使用，并具有如下任何表示组件：

let SomewhereInYourApp = () => (
  <FormContainer>
    {({ data, submitForm }) => (
      <div> 
       {/* put whatever you want here.. it's modular! */}
       <FormComponent data={data} handleSubmit={submitForm} />
      </div>
    )}
  </FormContainer>      
)

让SomewhereInYourApp=（）=>(
{（{data，submitForm}）=>(
{/*把你想要的东西放在这里..它是模块化的！*/}
)}
)

然后，您可以根据需要制作尽可能多的容器，这些容器只执行对it重要的特定业务逻辑，并嵌套它们，但这样做是有意义的。我不认为任何最佳实践会将所有内容组合到一个容器中。嵌套容器是完全可以接受的

如果你有很多容器，嵌套也有点太金字塔，考虑使用HOC或类似于使用渲染渲染器的容器的工具。 react adopt中合成容器的屏幕截图：

---

首先，容器组件不必包含业务逻辑。即使它有submitCommentHandler方法，它也可以像

submitCommentHandler（comment）=>this.commentService.add（comment）

一样简洁。此外，这是一个问题，国家管理图书馆，如Redux地址。谢谢！我需要进一步探究这条道路，但我想我理解了你的例子。

let SomewhereInYourApp = () => (
  <FormContainer>
    {({ data, submitForm }) => (
      <div> 
       {/* put whatever you want here.. it's modular! */}
       <FormComponent data={data} handleSubmit={submitForm} />
      </div>
    )}
  </FormContainer>      
)