redux

redux

[TOC]

Redux 介绍?

redux是js状态容器,提供可预测化的状态管理

它认为:

  • web应用是一个状态机,视图与状态是一一对应的关系

  • 所有的状态,保存在一个对象里面

设计思想:

  • 每个state变化可预测

  • 动作与状态统一管理

Redux与 MobX的区别?

  • 【代码量】 redux>mobx

    • redux: 需要定义一堆的action, dispatch,reducer

    • mobx: store和改变的方法

  • 【开发难度】 redux>mobx

    • mobx:使用面向对象的编程思维,相对简单

    • redux:比较复杂,函数式编程思维,同时需要借助一系列的中间件来处理异步和副使用

  • 【调试难度】 mobx>redux

    • redux:状态不可变,返回一个新的状态,同时使用纯函数;,redux 提供时间回溯的开发工具,同时纯函数以及更少的抽象,让调试变得更加容易

      • mobx:中状态可变,可对其直接修改,mobx中有更多的抽象和封装,调试比较困难,同时结果难预测

  • 【store数】

    • redux:单个store

      • mobx: 多个store

  • 【功能性】redux> mobx

    • redux: 可回溯状态,时间旅行,适合:画板应用,表格应用,很多时候需要撤销,重做等操作

      • mobx: 直接修改源数据

适用场景总结:

  • mobx: 简单项目,适合数据不复杂的应用

  • redux:大型项目,有回溯需求

redux的实现流程?

  • 用户(通过view)发出Action,发出方式是调用dispatch方法;

  • Store自动调用 Reducer ,传入两个参数,当前state,收到的Action,Reducer 返回新的 State

  • state更新后,store就会调用监听函数, 根据state触发重新渲染,更新view

整个流程中数据都是单向流动的,这种方式保证了流程的清晰

几个核心概念:

  • Store :数据中心,整个应用只能有一个store

  • State: store对象包含的所有数据

  • Action: 用户触发的行为名称(通过action再去触发state的改变,最终响应view的改变)

  • Action Creator: 生成action的函数,可生成多种action

  • Reducer: store收到action后,处理state的函数,叫到reducer,接收两个参数:action ,和当前state;返回值: 新的state

  • Dispatch: view发出action的唯一方法

Redux与Vuex区别?

相同点:

  • 都是做状态管理库

  • 都是从Flux中衍生来的(单一数据源,单向数据流)

不同点:

  • 【适用范围】redux是一个泛用的实现,也可以用在vue中,但是契合度不如vuex

多个vuex中引入module可以把store划分成多个单元 ;

redux常用的中间件?

  • redux-logger : 日志中间件,输出触发的action,和经过reducer处理前后的state值;

  • redux-thunk:处理异步

    • 优点:

      • 体积小:实现方式简单,只有不到20行代码

      • 使用简单:没有引入像redux-sage 或者 redux-observable 额外范式,上手简单

    • 缺点:

      • 耦合严重:异步操作与redux的action 偶合在一起,不方便管理

      • 功能弱:常用的功能需要自己封装

  • redux-saga:处理异步

    • 异步解耦:异步操作被转移到单独的saga.js中,不再掺杂在action.js 或 component.js中

    • 异常处理:受益于generator function的 saga实现,代码异常/请求失败 都可以直接通过 try/catch语法直接捕获处理

    • 功能强大:提供了大量的saga辅助函数和 Effect 创建器 供开发者使用

    • 灵活:可以将多个saga 串行/并行组合起来,形成一个非常实用的异步flow

    • 易测试:提供了各种case的测试方案,包括 mock task ,分支覆盖等

  • redux-promise:处理异步

  • redux-observable

    • -优点

      • -功能最强:背靠 rxjs这个强大的响应式编程库,几乎做任何你能想到的异步处理

    • 缺点

      • -学习成功奇高:如果不会rxjs,则需要额外学习两个复杂的库

redux中间件是什么,中间件的执行过程?

redux提供了类似后端experss中间件的概念,本质目地是提供第三方插件的模式

中间件的使用(改变数据流):

  • 未使用redux: action-> reducer

  • 使用redux: 自定义拦截,变成 action->middlewares->reducer

实现如异步action,action过滤,日志输出,异常报告等功能;

使用: redux提供的一个方法: applyMiddleware,可应用多个中间件;

redux中的connect有什么作用?

redux中的connect方法主要是把UI组件生成容器组件,connect的意思就是就是把两个连接起来;

import {connect} from "react-redux"

const VisibleTodoList=connet(

​    mapStateToProps,   //参数

​    mapDispatchToProps   //处理方法

)(TodoList)

解释一下 Flux思想?

Flux 是一种强制单向数据流的架构模式。它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

Redux遵循的特点?

  • 单一数据来源:"整个数据存储在store当中,方便调试和检查应用程序

  • 状态只读:改变状态的唯一方法是云触发一个动作。

  • 使用纯函数更改:纯函数是那些返回值仅取决于其参数的函数

Redux与flux有何不同?

Redux是flux思想(单向数据流,store唯一数据源)的一种实现,同时在其基础上做了改进

区别:

  • Store数

    • Redux: 单个

    • Flux: 多个

  • 更新位置不同

    • Redux:

    • Flux:

在 React 中如何处理事件

为了解决跨浏览器的兼容性问题,SyntheticEvent 实例将被传递给你的事件处理函数,SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器,它还拥有和浏览器原生事件相同的接口,包括 stopPropagation()preventDefault()

比较有趣的是,React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处,也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

react-redux

react-redux的实现原理?

react-redux 提供两个api;

  • Provider: 从最外部封装整个应用,并向connect模块传递store; (父子组件)

  • connect: (高阶组件)负责连接react和redux

    • 包装原组件:将state,action通过props的方式传入到原组件内部

    • 监听store tree变化:使其包装的原组件可以响应state的变化

react-redux的使用流程?

  • 创建store:(定义state,reducer) (使用Redux中的createStore api创建)

  • 封装应用:通过ReactRedux中的Provider方法把store传递给connect模块

  • connect

最后更新于