# 1. Flux

Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC架构是同一类东西,但是 更加简单和清晰。

Facebook Flux是用来构建客户端Web应用的应用架构。它利用单向数据流的方式来 组合React 中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就 可以快速的上手Flux。

Flux工作流程

# 2. Redux

Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树 (state对象)保存这一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers),这样就可以进行数据追踪,实现时光旅行。

# 2-1. Redux介绍及设计和使用的三大原则

  • state 以单一对象存储在store对象中
  • state 只读(每次都返回一个新的对象)
  • 使用纯函数reducer执行state更新

state 以单一对象存储在store对象中

state 只读(每次都返回一个新的对象)

# 2-2. Redux工作流

Redux工作流

# 与react绑定后 使用redux实现案例

Film首页组件时,显示底部导航栏Tabbar,点击跳转到详情页Detail页时,隐藏Tabbar,当再次返回到Film首页组件时,显示Tabbar组件

下面是按照 Redux工作流程,分步骤讲解: Action Creators层,需要返回一个单一的对象存储到store

Action Creators

dispatch (action)发出动作,经过Store层,到Reducer层修改状态

dispatch action

Store <==> Reducer层,接受老状态(有一个,默认值),返回新状态到Store

Store <==> Reducer

React Components层,需要在componentWillMount早早注册回调函数监听Store中的状态,需要在改变前监听,改变之后再监听,就无效了

React Components

纯函数设计

    1. 参数相同,返回值也一定相同
    1. 对外界没有副作用
    • 1)不能修改传入的参数
    • 2)不能修改函数作用域外的变量

参数相同,返回值也一定相同

// 纯函数
functtion test(a, b) {
  return a + b; 
}
test(1, 2)
test(1, 2)
test(1, 2)

// 非纯函数
functtion test(a, b) {
  return a + b + Math. random(); 
}
test(1, 2)
test(1, 2)
test(1, 2)

对外界没有副作用

// 有副作用 非纯函数
let myname = "lsh"
function test() {
  myname = "xiaoming"
}

test()

// 无副作用 纯函数
let myname = "lsh"
function test(myname) {
  myname = "xiaoming"
}

test(myname)

# 2-3. reduce合并 combineReducers

如果如果不同的action所处理的属性之间没有联系,我们可以把 Reducer 函数拆分成不同的函数。

负责处理不同属性,最终把它们合并成一个大的 Reducer 即可。

合并reducer:

合并reducer

拆分reducer:

拆分reducer

# 2-4. 中间件

在redux里,action仅仅是携带了数据的普通js对象。action creator返回的值是这个 action类型的对象。然后通过store. dispatch()进行分发。同步的情况下一切都很完美,但是reducer无法处理异步的情况。

那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是 middleware。

# redux-promise (store. dispatch参数可以是一个promise对象)

redux-promise

# redux-thunk (store. dispatch参数可以是一个function)

redux-thunk 返回的需要是一个函数,redux-thunk中间件会帮我们提供一个dispatch函数作为参数,把reducer需要的对象,dispatch出去

redux-thunk

# 3. react-redux

# 3-1. 介绍

react-redux介绍

# 3-2. 容器组件与UI组件

(1)UI组件

  • 只负责UI的呈现,不带有任何业务逻辑
  • 没有状态(即不使用this. state这个变量)
  • 所有数据都由参数(this. props)提供
  • 不使用任何Redux的API

(2)容器组件

  • 负责管理数据和业务逻辑,不负责UI的呈现
  • 带有内部状态(即store中存储的公共状态)
  • 使用Redux的API

react-redux流程

# 3-3. Provider与connect

(1)React-Redux 提供Provider组件,可以让容器组件拿到state。

注意:一般容器组件都为 最外层组件(App)

容器组件

(2)React-Redux 提供connect方法,用于从 UI组件生成容器组件。connect的意思,就是将这两种组件连起来。

connect连接的UI组件

connect连接的UI组件

# HOC与context通信在react-redux底层中的应用

  1. connect是高阶组件HOC。
  2. Provider组件,可以让容器组件拿到state ,内部基于context状态树提升原理,提升到共同的最近的父组件App之外的Provider。

# 高阶组件的应用与特点

HOC不仅仅是一个方法,确切说应该是一个组件工厂,获取低阶组件,生成高阶 组件。

  1. 代码复用,代码模块化
  2. 增删改props
  3. 渲染劫持(在返回的函数组件中,自定义dom节点,劫持渲染)

# vuex与redux的区别

  1. vuex处理异步是在Action中自己处理,而redux则借助redux-thunk中间件处理等。
  2. vuex可以直接修改原装,而redux必须是纯函数设计,不能修改原状态。
  3. vuex当状态改变之后,不需要注册回调函数提前监听,通过set/get拦截,自动更新视图,而redux需要自己监听,自己改变。

# redux的缺点弊端

  1. 使用redux时,每增加一个状态,都需要增加一个reducer纯函数处理,异步情况还要创建actionCreator借助中间件处理。
  2. 当redux中共享状态过多时,需要注册很多个回调函数监听时,发布订阅中的存储回调函数过多,占用内存,影响性能优化。