前端时光屋

# 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中共享状态过多时，需要注册很多个回调函数监听时，发布订阅中的存储回调函数过多，占用内存，影响性能优化。

←