zoukankan      html  css  js  c++  java
  • Redux-介绍&工作流程

    1.Redux介绍(数据层框架)

    React视图层框架

    Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。(Redux支持React,Angular、jQuery甚至纯JavaScript)

    如下图所示,在 React 中,UI 以组件的形式来搭建,组件之间可以嵌套组合。但 React 中组件间通信的数据流是单向的,顶层组件可以通过 props 属性向下层组件传递数据,而下层组件不能向上层组件传递数据,兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性

     

    当项目越来越大的时候,管理数据的事件或回调函数将越来越多,也将越来越不好管理。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。 当系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。

    如果这还不够糟糕,考虑一些来自前端开发领域的新需求,如更新调优、服务端渲染、路由跳转前请求数据等等。state 的管理在大项目中相当复杂。

    如下图所示,Redux 提供了一个叫 store 的统一仓储库,组件通过 dispatch 将 state 直接传入 store ,不用通过其他的组件。并且组件通过 subscribe 从 store 获取到 state 的改变。

     

    store 就像一个管理 state 改变的“中间人”,组件之间的信息传递不必直接在彼此间进行,所有的 state 变化都通过 store 这唯一数据源

     

    使用了 Redux ,所有的组件都可以从 store 中获取到所需的 state, 他们也能从 store 获取到 state 的改变。这比组件之间互相传递数据清晰明朗的多。

    看起来是不是有点像 Flux 。

     2.Redux的工作流程

     通俗的理解:

     参考:http://www.ferecord.com/learning-react-redux.html

  • 相关阅读:
    npm run eslint 报错 (87 errors, 0 warnings potentially fixable with the --fix option.)
    vue 项目 webstrom IDE格式化代码规则遵循eslint设置
    VUE:Method definition shorthands are not supported by current JavaScript version解决办法(该方法定义的缺陷是不支持当前的JavaScript版本)
    Flex 布局全解
    前端解析ipa、apk安装包信息 —— app-info-parser
    微信小程序开发
    base64上传到oss
    jQuery 文档操作方法
    学习v-on的使用
    学习vue结合ajax查询出后台数据
  • 原文地址:https://www.cnblogs.com/GumpYan/p/13215477.html
Copyright © 2011-2022 走看看