React.js + Flux -- 在视图中将回调作为 prop 传递
React.js + Flux -- Passing callback as a prop in view
官方React.js tutorial有一个有趣的做法,将回调作为prop传递给子组件。在他们的示例中,他们有一个名为 CommentBox
的父组件和一个名为 CommentForm
的子组件。父项 (CommentBox
) 将回调方法 handleCommentSubmit
传递给子项 (CommentForm
)。提交表单时,子组件触发回调通知父表单已提交。
但是,本 React 教程不是 Flux architecture 上的教程。从我有限的通量角度来看,我的第一直觉是子视图应该调用一个动作,该动作(通过全局调度系统)更新商店。更新后的存储将触发任何需要知道的组件的更新,包括有问题的父组件 CommentBox
。
换句话说,父组件不会关心,也不想知道它的子组件 CommentForm
在做什么,或者表单何时提交。相反,它会在商店更新时重新呈现。这意味着 任何触发商店更新的东西 都会导致 CommentBox
更新(我认为这是一件好事;如果有多种提交评论的方式会怎样?)
这让我想到了我的主要问题:在 Flux 架构中是否存在过适合将回调方法传递给子组件的情况,或者这是通常是反模式?
注意: 不是同一个问题 -- 我问的是视图中的回调,而不是操作中的回调。
如果你有一个纯 UI 组件,比如一个花哨的按钮,那么在 UI 中启用回调是有意义的;操作应仅用于触发应用程序更改:
<MyFancyButton onClick={this.handleClick}/>
显然,MyFancyButton
没有足够的信息知道点击应该做什么;由使用它来决定调度哪些操作的父视图决定。
官方React.js tutorial有一个有趣的做法,将回调作为prop传递给子组件。在他们的示例中,他们有一个名为 CommentBox
的父组件和一个名为 CommentForm
的子组件。父项 (CommentBox
) 将回调方法 handleCommentSubmit
传递给子项 (CommentForm
)。提交表单时,子组件触发回调通知父表单已提交。
但是,本 React 教程不是 Flux architecture 上的教程。从我有限的通量角度来看,我的第一直觉是子视图应该调用一个动作,该动作(通过全局调度系统)更新商店。更新后的存储将触发任何需要知道的组件的更新,包括有问题的父组件 CommentBox
。
换句话说,父组件不会关心,也不想知道它的子组件 CommentForm
在做什么,或者表单何时提交。相反,它会在商店更新时重新呈现。这意味着 任何触发商店更新的东西 都会导致 CommentBox
更新(我认为这是一件好事;如果有多种提交评论的方式会怎样?)
这让我想到了我的主要问题:在 Flux 架构中是否存在过适合将回调方法传递给子组件的情况,或者这是通常是反模式?
注意:
如果你有一个纯 UI 组件,比如一个花哨的按钮,那么在 UI 中启用回调是有意义的;操作应仅用于触发应用程序更改:
<MyFancyButton onClick={this.handleClick}/>
显然,MyFancyButton
没有足够的信息知道点击应该做什么;由使用它来决定调度哪些操作的父视图决定。