React系列——状态管理神器Mobx

最新推荐文章于 2025-05-29 10:33:44 发布

原创

最新推荐文章于 2025-05-29 10:33:44 发布 · 868 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

What？

Mobx是一个简单、可扩展的状态管理的库【文档地址】，它使用观察者模式来自动传播你的状态的变化到你的 React 组件。

React 和 MobX 是一对强力组合。React 通过提供机制把state渲染到组件，而MobX提供机制来存储和更新state供 React 使用。

核心思想： 任何源自应用状态的东西都应该自动的获得。
在这里插入图片描述

优势：

响应式系统会检测到您的所有更改，并将其传播到使用它们的地方。
所有数据更改和使用都会在运行时被跟踪，从而构建一个依赖关系树，捕获状态和输出之间的所有关系。
MobX 不受任何 UI 框架的限制，允许你独立管理应用程序状态。

How？

安装：

npm install mobx mobx-react 
或
yarn add mobx mobx-react-lite

案例一

import React from "react"
import ReactDOM from "react-dom"
import {
   
    makeAutoObservable } from "mobx"
import {
   
    observer } from "mobx-react-lite"

// 函数声明需要管理的state状态，和触发state改变的的actions
function createTimer() {
   
   
	// makeAutoObservable像加强版的makeObservable，默认情况下它将推断所有的属性。
	// 推断的规则为：所有的属性都成为observable，所有的方法都成为action，所有的计算属性都成为computed
    return makeAutoObservable({
   
   
        secondsPassed: 0,
        increase() {
   
   
            this.secondsPassed += 1
        },
        reset() {
   
   
            this.secondsPassed = 0
        }
    })
}

const myTimer = createTimer()

const TimerView = observer(({
   
    timer }) => (
    <button onClick={
   
   () => timer.reset()}>Seconds passed: {
   
   timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={
   
   myTimer} />, document.body)

setInterval(() => {
   
   
    myTimer.increase()