乐趣区

关于面试:前端面试宝典reactredux核心知识篇

jiezi

前言：

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

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

欢送在 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
退出移动版