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.cn/post/684490… 为什么我不再使用setstate

juejin.cn/post/684490… react hook全局状态管理