从react redux、Parent vs Child组件中使用connect()的首选方式是什么

Question

我对使用react redu库中的connect()的有效方法有点困惑。我有打击成分

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

在上面的代码中，少数是reactComponent(//注释)，其余是来自样式组件库的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存储的逻辑切片的表示组件，但也应该足够低，这样你就可以尽可能多地重用。因此，对于一个表单，容器应该包含所有输入，并且您可以将输入本身分离为任意多的表示组件。这也允许您使用不同的contineiner组件重用表示组件，只要您在构建它们时考虑到模块性。

Answer 2

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

在这里，我认为将SignUp组件连接到Redux是没有意义的，如果它唯一要做的就是将道具传递到SignUpForm。

另外，让我问您，如果您需要在不同的组件中渲染SignUpForm组件，会发生什么？好吧，这个组件也应该连接到Redux，并且应该传递道具。

我通常会尽量将存储数据保持在我将要使用的位置附近，同时它仍然有意义。

我希望它能有所帮助！

---

编辑

另一方面，如果您确定不会在应用程序中的任何其他地方使用SignUpForm，并且您需要来自存储区的数据(与SignUpForm相关的数据除外)，我将坚持只连接SignUp组件。

Answer 3

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

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

个人想法：我认为这与代码的效率无关，只是当你的代码扩展时，维护起来更容易