React with TypeScript 系列(五) --Flux
发布时间：2020-12-15 05:21:40 所属栏目：百科 来源：网络整理
导读：编者语：年末工作比较多，所以这么迟才带来Flux。话说广州下雪也是奇景了，这个地球怎么了。当伦敦是10度，广州是4度也是醉了，还是那句大家要保护地球。 对于React，更多是解决了UI层，也就是对于传统MVC中的View.至于Model-Controller 如果要整合React的代
|
编者语：年末工作比较多，所以这么迟才带来Flux。话说广州下雪也是奇景了，这个地球怎么了。当伦敦是10度，广州是4度也是醉了，还是那句大家要保护地球。 对于React，更多是解决了UI层，也就是对于传统MVC中的View.至于Model-Controller 如果要整合React的代码又是如何实现呢？Facebook提出了一个叫做Flux([fl?ks])的概念。 在传统MVC中，我们会遇到这样一个问题，随着项目功能和模块的增长，所产生的Model和对应的View就会多起来，而系统的复杂性也随之增加。如下图： 当然上图的情况比较极端，但也是一个不能不面对的问题，特别是有双向数据流产生的时候，就更难去解耦了。而Facebook所提供的Flux 是单向数据流的方式呈现，把MVC重新划分成Action,Dispatcher,Store,View 四个重要的组件。如图： 当Action触发时，flux通过Dispatcher进行响应。换句话说，Dispatcher是一个中转站，它管理整个Flux架构的数据枢纽,这看上去很像我们所说的Controller.而Store更接近我们的Model,负责数据的操作。但它也负责一些状态变化。Dispatcher其实是一个Store的回调注册。当Dispatcher响应Action时，通过已经注册的回调函数，将Action所提供的数据传送给对应的Store，而Store变化时，界面也会同步更新。 听上去有点复杂，我来说一个实例大家就会明白了，还是用回我们的主界面。我们把Facebook一个标准的Flux流图作为参考来说。 Dispatcher要做什么，当然是把对应的Store回调处理好，如所对应的Action和返回的值。这里要说我们需要做一个ActionType为每个不同的Action事件做绑定（如增删改查）。所以在定义Dispatcher时需要定义一个APIActionID的枚举类型。如图： 注意：这个枚举类型，分别会为Store和Action作出对应ID。所以大家必须要注意。别以为没用了 还有一个基本的对应类型APIAction Dispatcher的最后绑定是和APIAction做绑定 当我们在componentDidMount中使用Action时，它是通过Dispatcher去寻找Store的回调把数据传给Store保存，从而影响页面的变化的。 这里就是Action中的加载，最后是要把返回的结果给Store的，所以会通过Dispatcher绑定actionType,和返回的结果。而在Store中,就只需要对应好actionType即可。下面的的方法就是我们针对不同的actionType，Store所要做的事情。 Store涉及侦听回调事件，所以通过EventEmitter去完成.这里我们用到EventEmitter2 这个时候，只要能匹配好actionType，数据就可以顺利匹配上界面上了。 Flux不是一个新的技术，而是一个设计模式。对于Flux更多的是优化项目架构。或者你更习惯MVC/MVVM,但当模块增多的时候你会觉得它是更好的实现。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |