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

https://mobx.js.org/getting-started.html

使用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

https://codesandbox.io/s/sharp-cori-ecy29

基于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+)

原文链接

作者

参考文章

https://mobx.js.org/getting-started.html 10分钟入门mobx

https://juejin.im/post/59df1b536fb9a0452935c1d8 为什么我不再使用setstate

https://juejin.im/post/5d7ba90ce51d453b373b4da5 react hook全局状态管理

https://juejin.im/post/5e1bdc356fb9a02fe758651c

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论