这是优选的方式来使用来自反应-终极版，父VS子组件连接（）？

Question

我在从反应 - 终极版库使用connect()的有效途径很少混淆。我有吹气部件

class SignUp extends React.Component {
//some functions
render(){
  return (
      <SignUpPageWrapper>
        <SignUpPage>
          <SignUpPageLeft>
            <SignUpLeftText /> //component
          </SignUpPageLeft>
          <SignUpPageRight>
            <SignUpForm /> //component <=
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}

在上面的代码中，少数是反应Component（//注释）和其余的是从const风格-组件库。

截至目前，我已经SignUpForm容器，即包裹成connect()

class SignUpForm extends React.Component {
  //lots of code here using this.props from connect()

}    
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUpForm);

但我觉得这是不使用connect的有效途径，更好的将是父组件SignUp包装成connect像下面，然后经过methods和states作为props的子组件。

class SignUp extends React.Component {
    //some functions
    render(){
      return (
          //other components       
          <SignUpPageRight>
            <SignUpForm signupFunc={this.props.signupFunc} />
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUp);

什么是写这个代码的清洁，高效和好办法吗？

Answer 1

如果我们通过的文件，实际上是一个正确的或错误的答案。 Redux的文档建议分离成分成表象和容器组件。

反应从容器组件Redux的单独的表象组件绑定。这种方法可以让你的应用程序更容易理解，让你更轻松地重用组件。 Redux Documentation

你SignUpForm成分是具有与终极版的商店沟通的工作容器组件的一个很好的例子。值，调度处理程序应该通过道具向下传递到您的表象成分。这使你的店操作很容易理解，因为它是所有一个组件内含有。

现在的可重用性。您的容器组件时，应有序足够高，以便它可以包含所有将操纵你的终极版店的逻辑片，但足够低，你可以重复使用，尽可能表象的成分。因此，对于一种形式，容器应该包含所有的输入，你可以自己单独的投入尽可能多的表象成分，只要你喜欢。这也可以让你只要你采用了模块化的结构将它们与不同continainer组件重用你的表象成分。

Answer 2

有没有正确或错误的答案在这里，它是所有关于解释的上下文。

在这里，我想这没有意义的SignUp组件连接到终极版，如果它会做的唯一的事情是通过道具下降到SignUpForm。

而且，让我问你，会发生什么，如果你需要渲染不同的组件内部SignUpForm成分？那么，该组件还应该连接到终极版，并应通过道具普遍回落。

我通常尽量保持尽可能靠近我要去的地方使用它存储数据，而它仍然是有意义的。

我希望它能帮助！

---

编辑

在另一方面，如果你肯定不会在你的应用程序在其他地方使用SignUpForm，也需要你从商店除了从相关的数据SignUpForm，我要坚持简单地连接SignUp组件。

Answer 3

根据容器/表象部件的设计模式，所述容器部件应该知道的终极版状态和操作。这指出了Redux docs

这背后的原因是，你将有超过组件访问您的状态，你的数据将不被散布更多的控制。所以你的情况，我会得到国家和调度行为<SignUp />组件内部，并通过他们，如同道具<SignUpForm />。

个人的思考：我不认为这有什么用代码的效率，这只是方式更容易维护的时候你的代码秤