redux 和 mobx 调研结果- mobx

更新日期: 2020-02-19阅读量: 1023标签: redux

调研方向

  • 设计思想/基本用法/生态环境/性能优化
  • 总结


设计思想

mobx 的设计思想我总结之后,主要有以下两点:

  1. 函数响应式编程;
  2. 任何源自应用状态的东西都应该自动地获得;

mobx 不同于 redux 的单一数据源的统一管理,它可以有多个 store, 为了便于维护 ,每一个 store 都是一个类,这样便于维护和扩展;

同时,为了使数据可以自动更新,使用了响应式编程(异步数据流), 它使用了观察者模式和 装饰器模式,将 state 包裹成observable; 当state 有改变时(自己改变或是 action 触发), 就会相应的去更新由这个state 推导出来的 computed value 以及 reaction;(数据的更新主要由装饰器模式中的对类的修改 );

它的工作流大致是这样子:



基本用法

mobx 与redux 一样也是单向数据流,核心概念是 state,computed value,reaction,action 等。它们的大概功能为:

  • state: 包裹为 observable 的 的数据;

  • computed values: 从当前 state 中计算出的值,类似与 vue 中的computed;

  • reactions: 是当 state 改变时需要自动发生的副作用。比如打印到控制台、网络请求、递增地更新 React 组件树以修补 DOM 等等;不会产生值,常见 api 有 autorun, reaction, observe (针对性观察新旧值)等;

  • action: 是一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。通常使用 action 统一对 state 修改,而不是对自身修改;

这样听可能有一点抽象, 以表格为例:在电子表格中,有值的单元格都是 observable state;公式和图标是可从数据单元格和其他公式推导出的computed value;在屏幕上绘制数据单元格、公式的输出结果就是一个 reactions;对数据单元格或公式的修改就是一次action;

这里用一个栗子介绍:

class Person {
	// 定义状态
  [@observable](https://my.oschina.net/u/2298977) firstName = "huang";
  [@observable](https://my.oschina.net/u/2298977) lastName = "yuan";
  [@observable](https://my.oschina.net/u/2298977) nickName;
  
  @computed get fullName() {
    return this.firstName + " " + this.lastName;
  }
	@action.bound
    increment() {
	        this.firstName = "zhang";
    }
}
decorate{
}
const coolGirl = new Person();

// reactions:打印日志
autorun(() => {
  console.log(
    person.nickName ? person.nickName : person.fullName
  )
});

const ProfileView = observer(props => {
  if (props.person.nickName)
    return <div>{props.person.nickName}</div>
  else
    return <div>{props.person.fullName}</div>
});

// action
setTimeout(() => coolGirl.nickName = "yuanzhendashi", 5000);
setIimeout(coolGirl.increment, 1000);

React.render(<ProfileView person={coolGirl} />), document.body);

这是一个很简单的栗子,展示了mobx 的基本使用,主要分为这几个步骤;

  • 定义 state;将 Person 的 firstName,lastName,nickName observable 化;
  • 注册 computed value: 通过现有的 observable 变化时可以得到 fullName;
  • 注册反应 reactions: autorun; 在初始化时和 nickName 发生变化时,会打印日志;
  • 在触发 action 的时刻, 修改了firstName;

这是一个最简单的例子,展示了 Mobx 主要的代码组成:定义状态 -> 注册反应 -> 修改状态 -> 执行反应。


生态环境

主要跟大家说说,在与现有的技术栈或应用结合时,Mobx 生态有哪些最佳实践和优质的库。

  • 装饰器语法支持:create-react-app 目前还没有内置的装饰器支持。要解决这个问题,要使用 eject 命令;推荐使用mobx 内置的工具 decorate 来对类和对象进行装饰,而这个不需要启用装饰器语法
  • 与react 结合使用:可引入 mobx-react,自动绑定并更新 React 视图模板。
  • 状态管理: 可引入 mobx-state-tree,同时具备 immutable 数据的各种管理优势。

与react 结合使用扩展

当与 React 结合时,使用了mobox-react 库来处理 state 变化和view 更新的绑定在用法上,主要分为四个步骤:

1、 使用Provide组件用来包裹最外层组件节点,传入 store 通过 context 传递给后代组件;

2 . 通过 @observer 将 React 组件转化成响应式组件;mobx 用 autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件;

  1. 使用 @inject 给组件注入其需要的store,放置于 props 上;

  2. 观察并使用store 中的observable 数据

如下面代码

// 以 context 的形式传入store
import { Provider } from 'mobx-react' 
<Provider store={coolGirl}>
		<ProfileView/>
</Provider>


// 使用状态
import * as React from 'react'
import { inject, observer } from 'mobx-react'

@inject('store') // 如果是以 context 传入的必须要 @inject,否则不需要。
@observer
**export de**fault class ProfileView extends React.Component { 
	render () { 
	return ( <div> 我的姓名:{this.props.store.fullName} </div> ) 
	}
}

可以看出,使用起来非常简便;


性能优化

  • 尽可能多地使用小组件;@observer 组件会追踪 render 方法中所有的可观测的值,当任何一个值变化的时候,都会重新渲染,所以组件越小,重新渲染的变化就越小。

  • 在专用的组件中渲染列表;

  • 晚一点使用间接引用值;使用 mobx-react 时,推荐尽可能晚的使用间接引用值。 这是因为当使用 observable 间接引用值时 MobX 会自动重新渲染组件。 如果间接引用值发生在组件树的层级越深,那么需要重新渲染的组件就越少;

    快的: <DisplayName person={person} /> 慢的: <DisplayName name={person.name} />

  • 对于autorun 和reaction,每次变化的准备时间和结束时间为0.5 ~ 1ms。所以,可能不适合跟踪频繁变化的状态;

  • 减少渲染次数: 使用 action 触发状态更新;


发展趋势

内存/mobx-state-tree


总结

综上,使用mobx-react , 会有这些优缺点:

  • 优点:上手简单, 代码量少,响应快速,生态环境不错,正在茁壮成长;
  • 缺点: 由于store "分而治之",当组件变多,应用变复杂时,团队协作会变困难,状态管路容易出现问题,代码难以维护;


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/8300

React项目实战:react-redux-router基本原理

React项目实战:react-redux-router基本原理,Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。

深入理解 redux 数据流和异步过程管理

前端框架实现了数据驱动视图变化的功能,我们用 template 或者 jsx 描述好了数据和视图的绑定关系,然后就只需要关心数据的管理了。数据在组件和组件之间、组件和全局 store 之间传递,叫做前端框架的数据流。

redux中间件的原理_深入理解 Redux 中间件

最近几天对 redux 的中间件进行了一番梳理,又看了 redux-saga 的文档,和 redux-thunk 和 redux-promise 的源码,结合前段时间看的redux的源码的一些思考,感觉对 redux 中间件的有了更加深刻的认识,因此总结一下

带着问题看React-Redux源码

我在读React-Redux源码的过程中,很自然的要去网上找一些参考文章,但发现这些文章基本都没有讲的很透彻,很多时候就是平铺直叙把API挨个讲一下,而且只讲某一行代码是做什么的,却没有结合应用场景和用法解释清楚为什么这么做。

redux之redux-thunk和redux-saga

redux作为状态管理仓库,在我们前端应用中发挥着非常重要的作用,先放一张官方redux flow图片,使用middleWare背景:我们知道redux中数据流是同步的,不支持异步action更新或获取数据,但是在实际项目中异步请求数据绝对是高频出现,并且可以说占据了9成以上的业务场景

如何优雅地在React项目中使用Redux

Redux:状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux,react-redux:React插件,作用:方便在React项目中使用Redux,react-thunk:中间件,作用:支持异步action

react关于 Redux与flux的比较学习

flux四大元素:Dispatcher:根据注册派发动作(action),Store: 存储数据,处理数据,Action:用于驱动Dispatcher,View: 用户界面视图。flux的目的:纠正MVC框架的无法禁绝view与model通信的缺点。Redux基本原则:继承Flux基本原则:单向数据流

如何使用useReducer Hook?

看到“reducer”这个词,容易让人联想到Redux,但是在本文中,不必先理解Redux才能阅读这篇文章。咱们将一起讨论“reducer”实际上是什么,以及如何利用useReducer来管理组件中的复杂状态,以及这个新钩子对Redux意味着什么?

深入学习和理解 Redux

Redux官网上是这样描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript状态容器,提供可预测性的状态管理)。 目前Redux GitHub有5w多star,足以说明 Redux 受欢迎的程度。

动手实现一个react-redux

react-redux 是 redux 官方 React 绑定库。它帮助我们连接UI层和数据层。本文目的不是介绍 react-redux 的使用,而是要动手实现一个简易的 react-redux,希望能够对你有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!