javascript - 在 ReactJS 中使用反向数据流进行子级与父级通信的好方法是什么？

Question

我想知道 React 应用程序中的反向数据流。 考虑这个问题:data flow in react application和这篇文章http://facebook.github.io/react/docs/thinking-in-react.html

我们可以看到从子组件到父组件通信的“正常”方式是使用通过 this.props.myCallback 传递的回调。 (StackOverflow 文章就是一个很好的例子)

我的问题是:

• 我理解这个概念，但如果我们有更深层次的组件怎么办？我们必须将此回调传递给保存状态的顶级父组件和实际触发组件之间的每个组件。如果它们之间有 3 到 4 个组件，我就必须在每个组件中使用 this.props 来传递回调。
• 为什么不使用事件发射器？我可以从深层子组件发送一个事件，然后在我的顶级状态父组件中监听该事件。这样我们就可以避免这两者之间的所有代码。

请告诉我你对此有何看法!

Answer 1

我经历了惨痛的教训才知道，在组件层次结构的最高层保留尽可能多的逻辑是一种很好的做法。 Dan Abramov 在文章 Smart and Dumb Components 中很好地表达了这个想法，其中智能组件是那些保存逻辑的组件，而dumb组件只是用于显示。

所以，是的，当您只想更新父亲的状态，或者您希望父亲执行一个您不希望其逻辑属于 child 的操作时，回调机制可以很好地工作。

当你有比这稍微复杂的东西时，我建议你选择适合你口味的 Flux-ish 架构。 Flux 确实使用 node's EventEmitter与组件通信。