Question

为什么回调（或redux的调度）在组件的道具中传递而不是总是使用react-redux连接函数这一点很常见？

调度（或调度包裹的功能）作为道具：

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

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

VS

连接功能：

// 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

区别在于＃34;表现形式＆＃34;和＆＃34;容器＆＃34;组件，以前也称为智能和哑组件。容器组件是您连接的容器组件。并且演示组件是刚接收道具的组件。

我将由redux的创建者Dan Abramov链接到this Medium article。

引用福利部分：

更好地分离顾虑。通过这种方式编写组件，您可以更好地理解您的应用和UI。

更好的可重用性。您可以将完全不同的状态源使用相同的表示组件，并将它们转换为可以进一步重用的单独容器组件。

演示组件基本上是您的应用程序的“调色板”。您可以将它们放在一个页面上，让设计师调整所有变体，而无需触及应用程序的逻辑。您可以在该页面上运行屏幕截图回归测试。

这会强制您提取“布局组件”，例如补充工具栏，页面，ContextMenu，并使用this.props.children而不是在多个容器组件中复制相同的标记和布局。

根据我的个人经验，强迫自己使用这种风格确实让我的组件更加“理智”＃34;并且更容易理解/维护。我们欢迎您不要使用这种风格，但是当您遇到问题时，您可能需要重构以使用此方法来更好地区分问题。

如果我在没有Dan的帮助下进行总结，我会这样说：连接到处都会让你对组件中每个道具的来源感到困惑。如果你强迫自己只在非常特定的地方连接（在我的项目中，我倾向于在页面级别和根级别连接），那么你总是知道事情来自哪里有助于在出现问题时进行调试

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

1 个答案: