猿问
下载APP

如何使用redux和react在UI上添加一个filter?

如何使用redux和react在UI上添加一个filter


饮歌长啸
浏览 183回答 1
1回答

慕桂英3389331

为什么使用React还需要使用别的框架来搭配?React的核心是使用组件定义界面的表现,是一个View层的前端库,那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间,组件与数据模型之间的通信。为什么使用Redux?Facebook官方提出了FLUX思想管理数据流,同时也给出了自己的实现22来管理React应用。可是当我打开FLUX22的文档时候,繁琐的实现,又臭又长的文档,实在难以让我有使用它的欲望。幸好,社区中和我有类似想法的不在少数,github上也涌现了一批关于实现FLUX的框架,比较出名的有Redux23,Reflux5,Flummox7。其中Redux的简单和有趣的编程体验是最吸引我的地方。简单。和其它的FLUX实现不一样,Redux只有唯一的state树,不管项目变的有多复杂,我也仅仅只需要管理一个State树。可能你会有疑问,一个state树就够用了?这个state树该有多大?别着急,Redux中的Reducer机制可以解决这个问题。有趣。忙于迭代项目的你,体会编程带来的趣味是有多久没有体会到了?瞧下面这张图,右边那个调试工具是啥?整个应用的action和state都这么被轻松的管理了?行为还能被保存,删除,回滚,重置?修改了代码,页面不刷新也能产生变化?别开玩笑了,不行,世界那么大,让我去试试!687474703a2f2f692e696d6775722e636f6d2f4a34476557304d2e676966776x688注:Redux开发调试工具:redux-devtools136React应用无刷新保存工具:hot-loader44不明真相的群众,可能这里需要我来安利一下Flux数据流的思想,看图:╔═════════╗ ╔════════╗ ╔═════════════════╗║ Actions ║──────>║ Stores ║──────>║ View Components ║╚═════════╝ ╚════════╝ ╚═════════════════╝^ │└──────────────────────────────────────┘注意:图片仅仅是FLUX思想,而不是Facebook的实现。大致的过程是这样的,View层不能直接对state进行操作,而需要依赖Actions派发指令来告知Store修改状态,Store接收Actions指令后发生相应的改变,View层同时跟着Store的变化而变化。举个例子:A组件要使B组件发生变化。首先,A组件需要执行一个Action,告知绑定B组件的Store发生变化,Store接收到派发的指令后改变,那相应的B组件的视图也就发生了改变。假如C,D,E,F组件绑定了和B组件相同的Store,那么C,D,E,F也会跟着变化。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答