当开始使用一个新框架时, 许多开发人员经常落入陷阱,以一种它没有设计的方式使用它, 或者应用从以前的使用中学习到的实践和模式. As React.js和Flux挑战了其中的一些做法, 有可能我们一开始就没有做到最好. 让我们在下面的场景中看看这一点.
In Flux, 一个叫做dispatcher的东西负责通知所有商店app中发生了一些动作, 这样那些商店就能更新应用状态然后通知关心那些商店的视图有更新了, 让那些视图重新渲染自己. 那个dispatcher基本上作为一个事件总线.
A new React.js developer, 来自以前的MVC库或框架, 会很快想要监听那些操作,或者滥用“调度器”来触发不需要被商店监听的事件吗. 像这样:
componentDidMount () {
myDispatcher.register((action) => {
if (action.type === "whatImListeningFor").doSomething ();
});
}
如果你正处于这种情况,或者你正在从事的项目中有这种情况,请三思而后行. 在这个架构中, 国家是真理的源泉, 以及应用中发生的任何有意义的事情, 你应该有一些状态来表示发生的事情所造成的一些变化.
有些事情最初似乎是错误的模型状态, 或者基于事件而不是基于状态进行建模更有意义. For example, 动画是你可能认为应该由事件触发的东西, 而不是在州旗上说 动画:真
或者类似的东西. 但实际上,动画实际上是一个可视化的 transition 国家间的. 在这个例子中,我们可以不听事件,而是听 状态转换 触发特定组件中的动画. 你说,我们怎么能做到呢? Well, React
为我们提供了一些 生命周期的钩子 它允许我们做我们想做的事情: componentWillReceiveProps
, componentWillUpdate
, componentDidUpdate
,是要在前面的链接中查找的. 它们允许我们比较以前的道具和新道具(或以前的本地状态), 和新的地方州),并在发生这种情况时采取行动. 我们可以在那里触发动画,或者任何我们想要的东西. 这样我们也可以检测到返回到另一个状态的转换, 然后恢复动画. 它使我们能够更好地控制要做什么,并与应用程序的状态保持同步, 与从其他地方触发一个想对我们说点什么的单一事件相比, 并将该事件的发射器与调用者耦合.
从个人经验来看,我还没有发现需要发射事件, 并且总是能够通过倾听来解决这些问题 状态转换. 如果有真正需要的用例, trust me, 它们非常罕见,你应该在尝试之前考虑一下这里解释的方法. 如果您需要特定用例的帮助,并且不知道该怎么做,您可以在下面留下评论.
话虽如此,值得一提的是,我们正在讨论的国家没有 necessarily 意思是它应该在商店里生活. 如果把它放在那里没有意义,你可以直接使用本地组件状态(this.state
and this.setState
),并有相同的工作方式(如前所述, componentWillUpdate
and componentDidUpdate
与当地政府合作). 如果您发现将其移到存储中是有意义的(因为它与其他组件共享), 您可以通过操作而不是直接在组件中轻松升级和修改它.
总而言之, 避免将调度程序用作存储库无法处理的事件的事件总线, 试着去听 状态转换 提供的生命周期钩子 React
在你的组件中. 不要仅仅因为dispatcher是事件发射器就滥用它,它的角色就是事件发射器 非常具体的.