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全局状态管理