前提
在之前项目中,我们一般是用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.
有兴趣的同学可以康康这个简单例子
和这个十分钟入门mobx
使用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
基于hook扩展的的状态管理工具 mobx-react-lite
同样在observable对象内管理状态,但不使用inject注入store,而是交给context管理
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全局状态管理
作者:YYDev
链接:https://juejin.im/post/5e1bdc356fb9a02fe758651c
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com