前言：

想零碎学习前端面试题，强烈推荐浏览 在线电子书（反对手机版，不断更新） 。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在github上留言反馈

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