谈谈你对react中状态管理的理解?

简介: 谈谈你对react中状态管理的理解?

谈谈你对状态管理的理解?

Flux

首先介绍 FluxFlux 是一种使用单向数据流的形式来组合 React 组件的应用架构。

Flux 包含了 4 个部分,分别是 DispatcherStoreViewAction

工作流程

Store 存储了视图层所有的数据,当 Store 变化后会引起 View 层的更新。如果在视图层触发一个 Action,就会使当前的页面数据值发生变化。Action 会被 Dispatcher 进行统一的收发处理,传递给 Store 层,Store 层已经注册过相关 Action 的处理逻辑,处理对应的内部状态变化后,触发 View 层更新。

Flux 的优点是单向数据流,解决了 MVC 中数据流向不清的问题 ,使开发者可以快速了解应用行为。从项目结构上简化了视图层设计,明确了分工,数据与业务逻辑也统一存放管理,使在大型架构的项目中更容易管理、维护代码。

Redux

其次是 ReduxRedux 本身是一个 JavaScript 状态容器,提供可预测化状态的管理。

社区通常认为 Redux 是 Flux 的一个简化设计版本,它提供的状态管理,简化了一些高级特性的实现成本,比如撤销、重做、实时编辑、时间旅行、服务端同构 等。

Redux 的核心设计包含了三大原则:单一数据源、纯函数 Reducer、State 是只读的。

Redux 中整个数据流的方案与 Flux 大同小异

Redux 中的另一大核心点是处理“副作用”,AJAX 请求等异步工作,或不是纯函数产生的第三方的交互都被认为是 “副作用”。这就造成在纯函数设计的 Redux 中,处理副作用变成了一件至关重要的事情。社区通常有两种解决方案:

  • 第一类是在 Dispatch 的时候会有一个 middleware 中间件层,拦截分发的 Action 并添加额外的复杂行为,还可以添加副作用。第一类方案的流行框架有 Redux-thunkRedux-PromiseRedux-ObservableRedux-Saga 等。
  • 第二类是允许 Reducer 层中直接处理副作用,采取该方案的有 React LoopReact Loop 在实现中采用了 Elm 中分形的思想,使代码具备更强的组合能力。
  • 除此以外,社区还提供了更为工程化的方案,比如 rematchdva,提供了更详细的模块架构能力,提供了拓展插件以支持更多功能。

redux的核心原理是什么?

1.将应用的状态统一放到state中,由store来管理state。

2.reducer的作用是返回一个新的state去更新store中对用的state。

3.按redux的原则,UI层每一次状态的改变都应通过action去触发,action传入对应的reducer 中,reducer返回一个新的state更新store中存放的state,这样就完成了一次状态的更新

4.subscribe是为store订阅监听函数,这些订阅后的监听函数是在每一次dipatch发起后依次执行

可以添加中间件对提交的dispatch进行重写

redux工作流程:

  • Viewredux中会派发action方法
  • action通过storedispatch方法会派发给store
  • store接收action,连同之前的state,一起传递给reducer
  • reducer返回新的数据给store
  • store去改变自己的state

redux的优点很多:

  1. 结果可预测;
  2. 代码结构严格易维护;
  3. 模块分离清晰且小函数结构容易编写单元测试;
  4. Action 触发的方式,可以在调试器中使用时间回溯,定位问题更简单快捷;
  1. 单一数据源使服务端同构变得更为容易;社区方案多,生态也更为繁荣。

Mobx

最后是 Mobx,Mobx 通过监听数据的属性变化,可以直接在数据上更改触发UI 的渲染。在使用上更接近 Vue,比起 Flux 与 Redux 的手动挡的体验,更像开自动挡的汽车。Mobx 的响应式实现原理与 Vue 相同,以 Mobx 5 为分界点,5 以前采用 Object.defineProperty 的方案,5 及以后使用 Proxy 的方案。


Mobx的优点是样板代码少、简单粗暴、用户学习快、响应式自动更新数据让开发者的心智负担更低。


Mobx 在开发项目时简单快速,但应用 Mobx 的场景 ,其实完全可以用 Vue 取代。如果纯用 Vue,体积还会更小巧

67bc20c22fc449819b103a5744754765.png

相关文章
|
1月前
|
前端开发 JavaScript API
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
|
1月前
|
存储 前端开发 JavaScript
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
38 3
|
1月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
33 1
|
2月前
|
前端开发 JavaScript API
深入探索React Hooks与状态管理
深入探索React Hooks与状态管理
44 2
|
1月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
41 0
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
82 0
|
3月前
|
前端开发 JavaScript API
react 常用的状态管理
【8月更文挑战第29天】react 常用的状态管理
56 1
|
3月前
|
前端开发 JavaScript 算法
深入剖析React状态管理的优势与局限
【8月更文挑战第20天】
112 3
|
3月前
|
存储 前端开发 JavaScript
|
3月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
37 0