猿问
下载APP

请问一下Redux与Flux有何不同?

Redux与Flux有何不同?


料青山看我应如是
浏览 163回答 4
4回答

哆啦的时光机

Redux要解决什么问题?随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。 当系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。Redux的设计借鉴Flux、 Elm、Immutable,它的出现就是为了解决state里的数据问题。Redux和Flux的主要区别是Redux里面是单一的数据源设计,而Flux(或者Reflux)里面有多个数据源。Redux是如何工作的?我们知道,在React中,数据在组件中是单向流动的。数据从一个方向父组件流向子组件(通过props),由于这个特征,两个非父子关系的组件(或者称作兄弟组件)之间的通信并不是那么清楚。React并不建议直接采用组件到组件的通信方式,尽管它有一些特性可以支持这么做(比如先将子组件的值传递给父组件,然后再由父组件在分发给指定的子组件)。这被很多人认为是糟糕的实践方式,因为这样的方式容易出错而且会让代码向“拉面”一样不容易理解。当然React也没有直接建议如何去处理这种情形,以下是React的文档中关于这部分的描述:对于非父子关系的组件,你可以自己建立一个全局的事件系统,Flux的模式也是一种可行的方式。Redux的出现就让这个问题的解决变得更加方便了。Redux提供一种存储整个应用状态到一个地方的解决方案(可以理解为统一状态层),称为“store”,组件将状态的变化转发通知(dispatch)给store,而不是直接通知其它的组件。组件内部依赖的state的变化情况可以通过订阅store来实现。使用Redux,所有的组件都从store里面获取它们依赖的state,同时也需要将state的变化告知store。组件不需要关注在这个store里面其它组件的state的变化情况,Redux让数据流变得更加简单。这种思想最初来自Flux,它是一种和React相同的单向数据流的设计模式。

泛舟湖上清波郎朗

Flux:1. Store 包含状态和更改逻辑2. 有多个 Store3. 所有 Store 都互不影响且是平级的4. 有单一调度器5. React 组件订阅 store6. 状态是可变的Redux:1. Store 和更改逻辑是分开的2. 只有一个 Store3. 带有分层 reducer 的单一 Store4. 没有调度器的概念5. 容器组件是有联系的6. 状态是不可改变的这些都是很专业的知识,看来你学的还可以啊,我之前学基础的知识都是在黑马程序员看的,老师讲的很不错的!

守候你守候我

React+Redux非常精炼,良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程(FP)范式。在工程化过程中,架构(顶层)设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底,传统框架与react+redux就是OO与FP编程范式的对决。简单学习某项技术并不能让建立起一个全局理解,也很难工程化。所以,我们必须要看以下几方面:了解其独特的东西。如React中组件是pure render函数。置新技术于上下文中。将React放在flux、redux中。才能真正看到数据单向流动。对比看到优势。比其它的解决方案(vue, angluar,adobe flex),看其优势。挑战。软件领域里没有银弹,有好处一定有挑战。

慕斯709654

componentDidMount() {console.log('22',ReactDOM.findDOMNode(this.refs.mode))console.log('22',ReactDOM.findDOMNode(this.refs.mode1))}<Modal title="Basic Modal" visible={true} ref="modal"onOk={this.del} onCancel={this.del}><div ref="modal1"><p >some contents...</p><p>some contents...</p><p>some contents...</p></div></Modal>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答