哪个是使用来自react-redux,Parent vs Child组件的connect()的首选方法？

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 的 React 绑定将展示组件与容器组件分开。这种方法可以使您的应用程序更易于理解，并允许您更轻松地重用组件。 Redux 文档

您的SignUpForm组件是容器组件的完美示例，它负责与 redux 存储进行通信。值和调度处理程序应该通过 props 传递给你的展示组件。这使您的商店操作非常容易理解，因为它全部包含在一个组件中。

现在是为了可重用性。您的容器组件应该足够高，以便它可以包含将操作您的 redux 存储的逻辑切片的所有表示组件，但足够低以便您可以尽可能多地重用。因此，对于表单，容器应该包含所有输入，并且您可以将输入本身分成任意数量的表示组件。这也允许您使用不同的容器组件重用您的展示组件，只要您以模块化方式构建它们。

Answer 2

根据容器/展示组件设计模式，容器组件应该了解 Redux 状态和操作。Redux 文档中指出了这一点

这背后的原因是，您可以更好地控制哪些组件可以访问您的状态，并且您的数据不会分散。因此，在您的情况下，我将在组件内获取状态和分派操作<SignUp />，并将它们作为 props 传递给<SignUpForm />.

个人想法：我认为这与代码的效率没有任何关系，只是当代码扩展时更容易维护