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

Question

为什么在组件的 props 中传递回调（或 redux 的调度）而不是总是使用 react-redux connect 函数很常见？

Dispatch（或包裹在 dispatch 中的函数）作为 prop：

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

不同的是"presentational"和"container"组件，以前也叫smart和dumb组件。容器组件是您 "connect" 的组件，而展示组件是仅接收道具的组件。

我会 link 联系 this Medium article 丹阿布拉莫夫，redux 的创造者。

引用福利部分：

Better separation of concerns. You understand your app and your UI better by writing components this way.

Better reusability. You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.

Presentational components are essentially your app’s “palette”. You can put them on a single page and let the designer tweak all their variations without touching the app’s logic. You can run screenshot regression tests on that page.

This forces you to extract “layout components” such as Sidebar, Page, ContextMenu and use this.props.children instead of duplicating the same markup and layout in several container components.

根据我个人的经验，强迫自己使用这种风格确实让我的组件更加 "sane" 并且更容易 understand/maintain。欢迎您不使用这种风格，但是当您运行遇到问题时，您可能需要重构以使用这种更好地分离关注点的方法。

如果我要在没有 Dan 帮助的情况下进行总结，我会这样说：到处连接会使组件中每个道具的来源变得混乱。如果你强迫自己只在非常特定的地方连接（在我的项目中，我倾向于在页面级别和根级别连接），那么你将始终知道事情的来源，这有助于在出现问题时进行调试。

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

Why to pass callbacks in React component's props instead of using react-redux's connect?

reactjs

redux