为什么Mobx有用？
为什么Mobx有用？
提问于 2022-04-19 23:42:11
MobX网络教程真的很难通过。有人能用通俗易懂的语言向我解释为什么MobX在有状态管理系统的情况下是有用的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-20 01:32:25
Mobx是一个应用函数式反应编程的状态管理库，它与OOP中的观测器模式非常相似。
对于复杂状态的组件，它比常规的反应状态管理更方便。
使用mobx的
- 您不需要多次使用useState。您可以将状态存储在一个类似于常规js对象的对象中(但实际上是一个代理对象，它由getter和setter组成)。与几次调用setState不同，您可以一次性更改mobx状态对象。
- Mobx状态对象不是不可变的，这对于嵌套状态来说更方便，因为您不需要一路创建一个浅拷贝，以确保setState可以将一些逻辑与组件解耦，从而简化它(与useMemo类似的计算)。
- Mobx比redux简单得多，而且效率更高。
下面是一个常规的反应示例：
const Widgets = (props) => {
const [widgets, setWidgets] = useState([])
const [status, setStatus] = useState('loading') // loading, error, loaded
const onLoaded = (widgets) => {
setWidgets(widgets)
setStatus('loaded')
}
const onClose = (widget) => {
const index = widgets.findIndex(currWidget => widget === currWidget)
const nextWidgets = [...widgets]
nextWidgets[index] = { ...nextWidgets[index] }
nextWidgets[index].status = 'animatingOut'
setWidgets(nextWidgets)
}
const hasActiveWidgets = useMemo(() => widgets.some(widget => widget.isActive), [widgets])
if(hasActiveToasts){
// something
}
...
}下面是mobx的相同示例：
class State {
constructor(){
makeAutoObservable(this) // use second parameter, to override, which properties to track and how
}
widgets: []
status: 'loading'
hasActiveWidgets: () => this.widgets.some(widget => widget.isActive)
}
const Widgets = observer((props) => {
const state = useMemo(() => new State(), [])
const onLoaded = action((widgets) => {
state.widgets = widgets
state.status = 'loaded'
})
const onClose = action((widget) => widget.status = 'animatingOut')
if(state.hasActiveWidgets()){ // this causes rerender, whenever this function result changes (if state was changed inside action or runInAction)
// something
}
...
})此外，您还可以将mobx状态放到react上下文中，并与多个组件共享它。这样，它的工作方式可以类似于redux商店。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71932510
复制相关文章
相似问题
腾讯云开发者
