为什么要在React组件的道具中传递回调，而不是使用react-redux的连接？

Question

为什么通常在组件的道具中传递回调（或者redux的派发）而不是总是使用react-redux connect函数？

调度（或功能包裹在调度）如丙：

// somewhere.js, calling Component in JSX with onButtonClick as props 
<Component onButtonClick={someFunction}/> 

// component.js 
const Component = ({onButtonClick}) => <Button onClick={onButtonClick}>{'do something'}</Button> 

与

连接功能：

// somewhere.js, calling Component in JSX without giving props 
<Component/> 

// component.js 
const Component = ({onButtonClick}) => <Button onClick={onButtonClick}>{'do something'}</Button> 
const mapDispathToProps = (dispatch, ownProps) => { 
    return { 
      onButtonClick: dispatch(someFunction) 
      } 
} 
connect(mapDispathToProps)(Component) 

Answer 1

所不同的是 “表象” 和 “容器” 的部件，以前也称为智能和愚蠢组件。容器组件是您“连接”的组件，而呈现组件则是接收道具的组件。

我将通过丹阿布拉莫夫，终极版的创造者链接出去this Medium article。

引述了益节：

• 较好的分离的担忧。通过这种方式编写组件，您可以更好地理解您的应用和用户界面
• 更好的重用性。您可以将完全不同的状态源使用相同的表示组件，并将它们转换为可以进一步重用的单独的容器组件。
• 表示组件基本上是您的应用程序的“调色板”。您可以将它们放在单个页面上，让设计师调整所有变体，而不必触摸应用程序的逻辑。您可以在该页面上运行屏幕截图回归测试。
• 这将迫使你提取“布局的构成要素”，如边栏，网页，文本菜单，而是使用在几个容器组件重复相同的标记和布局this.props.children。

---

在我个人的经验，强迫自己使用这种风格确实让我的部件更“理智”，更容易理解/维持。欢迎您不要使用此风格，但是当遇到问题时，您可能需要重构以使用此方法更好地区分问题。

如果我不丹的帮助下，总结，我要说的是：连接所有的地方使它混淆为每个您在您的组件有道具的来源。如果你强迫自己只在非常特定的地方连接（在我的项目中，我倾向于在页面级别和根级别进行连接），那么当事情出错时，您将始终知道事情来自哪里，从而帮助进行调试。