React系列-Redux

244 阅读3分钟

面试了许多求职者,很多求职者只知其然,而不知所以然,写此文章为广大前端小伙伴指引迷津。纯干货!纯干货!纯干货!

目录

Redux

什么是React?

答:专门为React应用程序开发的状态管理模式。

为什么要使用Redux?

答:项目不需要开发大型的单页应用,此时你完全没有必要使用Redux,项目达到了中大型应用的规模,如何更好地在组件外部管理状态,Redux 将会成为自然而然的选择。

Redux的组成部分?

答:action、reducer、store。

action: 两个属性:type:标识,payload:数据。
reducer:根据传入的旧状态和action,返回新状态。
store: 仓库,Redux 的核心,整合 action 和 reducer。
  • redux三个原则:
    • 单一事实来源:整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序。
    • 状态是只读的:改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样,该操作是对数据更改的最小表示。
    • 使用纯函数进行更改:为了指定状态树如何通过操作进行转换,你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。
数据修改流程?
  • 当你需要更新状态时,就先分发动作 store.dispatch(action)
  • Redux 内部,store 就会调用 reducer,传入:上一次的状态 和 action ,计算出新的状态,并返回。
  • reducer 执行完毕后,将最新的状态交给 store,store 用最新的状态替换旧状态,状态更新完毕。
小项目解决方案Mobx
  • Mobx

Redux 有个问题,就是修改某个 state 的时候,需要经过 action.jstypes.jsreducers.js 这一系列文件,这样子 Redux 的数据流虽然非常正规,但是写起来复杂啊。

所以,社区又出现了另一套解决方案,也就是 Mobx

Mobx 推崇代码简约移动,只需要定义一个可贯彻的对象,然后在哪个组件中使用到了这个可观察对象,并且这个对象的数据有更改,那就会重新渲染,这使得 Mobx 开发项目的时候可以简单快速地完成很多功能。 但是 Mobx 也有缺点,就是数据流太过随意,出了 Bug 不好定位。

  • End

所以,针对于小项目来说,社区推荐使用 MobX,对大项目推荐使用 Redux。

Redux页面刷新数据丢失问题解决方法?

答:sessionStorage、react插件(redux-persist)等。

面试大白话

答:首先,Redux专门为Redux应用程序开发的状态管理模式。其主要目的也是为了中大型项目中,更好地在组件外部管理状态。它主要包括几个部分...我们项目里面一般就是sessionStorage结合Redux使用,防止页面刷新数据丢失问题。不过Redux还是结合实际来使用,项目不需要开发大型的单页应用,此时完全没有必要使用Redux,并且Redux写起来比较繁琐,小项目的话可以用mobx代替。

小白也是新手面试官,欢迎领导莅临指导工作,提出建议,小白不胜感激,不喜勿喷,点赞收藏随机送程序媛小姐姐一枚哦!!!