React开发日记-React Hook/Mobx 数据状态管理对比

前提

在之前项目中,我们一般是用mobx做数据状态管理,本文尝试使用新的方式--react hook,实现状态管理,比较新旧方式的异同。
本文后面的所有内容的上下文都是在react项目中

欢迎指正,欢迎提出需要补充的地方。

Mobx

先对mobx进行简单介绍,如下图可见,
从左往右顺序查看
1有且仅有action可以用于修改state,state变化会导致计算属性(如果有的话)产生变化
2计算属性的变化会导致reaction被触发,产生一些副作用,例如更新UI

why Mobx

我们的项目中使用mobx而不再使用setState原因有如下几个(个人理解)

1 setSate 不是同步操作,当我们通过setstate修改state数据后,后面的逻辑立即取值是旧值,state的新值在下一次render时获取到。
2 setState 不适合管理全局的状态。

mobx状态管理实例

mobx的使用方式也很简单
1 安装mobx相关的npm
2 声明一个store类 存放我们需要的数据
import { action, computed, observable } from "mobx"
class Store {
    // 被观察者,你可以理解成Vuex中的State,也就是说,声明一些想要观察的状态,变量。
    // 被观察者可以是:JS基本数据类型、引用类型、普通对象、类实例、数组和映射
    @observable public num: number = 0;

    @computed
    public get addNum() {
        // ...
    }

    // 使用@action 更改被观察者
    @action.bound
    public add() {
        // ...
    }
}
3 在最顶层使用provider注入所有的store,并且在需要监听变化的地方的地方使用inject响应的数据,
并在组件声明之前使用@observerble修饰符将组件改造为观察者,只要它依赖的任何数据发生变化,就会刷新组件.
@inject("store") 
@observer   
class Example extends React.Component<{},{}> {
   public render() {
        return (
            <h1>{this.props.store!.num}</h1>
        )
    }
}

</{},{}>

原理类似于一个使用@computed 声明的store属性,使用@observer修饰的组件会自动执行rebuild

React components are (despite their name) not reactive out of the box. The @observer decorator from the mobx-react package fixes that by wrapping the React component render method in autorun, automatically keeping your components in sync with the state.

有兴趣的同学可以康康这个简单例子

react中使用mobx的简单实例-jsfidder打开

和这个十分钟入门mobx

mobx.js.org/getting-sta…

使用react hook 实现全局状态管理

1 新建context
const StateContext = createContext();
2 设置StateContext.Provider的值为 useReducer
const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value="{useReducer(reducer," initialState)}="">
    {children}
  </StateContext.Provider>
);
3 子组件(children) 使用dispath触发reducer时 导致了Context 的 value的变化
导致了StateContext的value的更新,导致了组件的更新,由此实现 context reducer
->action->state-依赖于State的组件更新的数据传递

有兴趣的同学可以看看这个在线demo

codesandbox.io/s/sharp-cor…

基于hook扩展的的状态管理工具 mobx-react-lite

同样在observable对象内管理状态,但不使用inject注入store,而是交给context管理

github

react hook状态管理 在ssr中的问题

主要是从class组件到函数组件的过程中,需要注意的几个不同点

1 getInitialProps  class的静态属性->function组件的属性
Page.getInitialProps = async ctx => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
2 原有的class组件中,store可以通过继承baseStore,在baseStore中,通过传入initState,
实现CS两端的状态同步,而函数组件中,没有继承的概念,需要寻找其他方法实现两端数据同步

总结

1 使用 context api + useReducer的方式,可以完成大部分状态管理的需求,适合全局状态较为简单的项目,但尚未解决ssr数据同步问题。

1 mobx 推出了 mobx-react-lite,更新了内部的工作机制,使用context做状态管理,相对于原先的mobx-react的实现更为轻量(仅支持react 16.8.0+)

原文链接

作者

参考文章

mobx.js.org/getting-sta…10分钟入门mobx

juejin.im/post/59df1b…为什么我不再使用setstate

juejin.im/post/5d7ba9…react hook全局状态管理

原文链接:juejin.im

上一篇:JS是怎样执行的
下一篇:详细的 webpack4 多入口配置

相关推荐

  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    1 个月前
  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高效的Mobx模式(Part 3 高阶应用实例)

    前两部分侧重于MobX的基本构建块。 有了这些块,我们现在可以通过MobX的角度开始解决一些真实场景。 这篇文章将是一系列应用我们迄今为止所见概念的例子。 当然,这不是一个详尽的清单,但应该让你体会...

    2 年前
  • 高效的Mobx模式 - (Part 1)

    起因 很早之前看到的一篇关于mobx的文章,之前记得是有人翻译过的,但是怎么找都找不到,故花了点时间通过自己那半桶水的英文水平,加上Google翻译一下,对于初学者,以及mobx的开发者提供些许帮...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    1 年前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    3 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前

官方社区

扫码加入 JavaScript 社区