脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Mobx React应用状态管理

Mobx实现React 应用的状态管理详解

 更新时间：2022年12月05日 08:46:32   作者：何遇er  
这篇文章主要为大家介绍了Mobx 实现 React 应用的状态管理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

MobX

MobX 是一个状态管理库，它会自动收集并追踪依赖，开发人员不需要手动订阅状态，当状态变化之后 MobX 能够精准更新受影响的内容，另外它不要求 state 是可 JSON 序列化的，也不要求state 是 immutable，MobX 推荐的数据流如下图所示：

本文先以一个 demo 单独介绍 Mobx 的用法，再介绍如何将 Mobx 与 React 结合实现 React 应用程序的状态管理。

从一个 demo 开始

这部分用 MobX + TypeScript 实现一个 TODO List 的 demo，MobX 的版本为 6.5.0，TypeScript 的版本为 4.5.4，将 TypeScript 编译器配置项 useDefineForClassFields 设置为 true。

创建类并将其转化成可观察对象

创建 ToDoItem 类和 ToDoList 类，ToDoItem 类的代码如下：

import { makeObservable, observable, action } from 'mobx'
class ToDoItem {
    id: number
    name: string
    status: 0 ｜ 1
    changeStatus(status: Status) {
        this.status = status
    }
    constructor(name: string) {
        this.id = Uid ++
        this.name = name
        this.status = 0
       // 注意这里
        makeObservable(this, {
            status: observable,
            changeStatus: action
        })
    }
}

用 makeObservable 将 ToDoItem 实例变成可观察的，用 observable 标记 status 字段，让 MobX 跟踪它的变化，changeStatus 方法用于修改 status 的值，所以用action标记它。

ToDoList 类比 ToDoItem 类复杂一些，它收集 Todo-List Demo 需要的全部数据，代码如下：

import { makeObservable, observable, action, computed, runInAction } from 'mobx'
class ToDoList {
    searchStatus?: 0 ｜ 1
    list: ToDoItem[] = []
    get displayList() {
        if (!this.searchStatus) {
            return this.list
        } else {
            return this.list.filter(item => item.status === this.searchStatus)
        }
    }
    changeStatus(searchStatus: Status | undefined) {
        this.searchStatus = searchStatus
    }
    addItem(name: string) {
        this.list.push(new ToDoItem(name))
    }
    async fetchInitData() {
        await waitTime()
       // 注意这里
        runInAction(() => {
            this.list = [new ToDoItem('one'), new ToDoItem('two')]
        })
    }
    constructor() {
        makeObservable(this, {
            searchStatus: observable,
            list: observable,
            displayList: computed,
            changeStatus: action,
            addItem: action
        })
    }
}

与 ToDoItem 相比，ToDoList 多使用了 computed 标记，这是因为 displayList 的值由 searchStatus 和 list 通过一个纯函数计算而来，所以它被标记为 computed。fetchInitData 是一个异步方法，在其中用 runInAction 创建一个立即执行的 action 去修改 list 的值，从 fetchInitData 的实现可以看出，异步修改 state 和同步修改 state 没有差别，只要保证 state 是在 action 中修改的即可。

使用可观察对象

在上一步的 ToDoList 和 ToDoItem 的构造函数中，我们调用了 makeObservable 方法，并用合适的注解去标记实例字段，接下来用一段代码验证 MobX 是否按照要求跟踪state的变化。代码如下：

import { autorun} from 'mobx'
autorun(() => { console.log(toDoList.list.length) }) // line A
autorun(() => { console.log(toDoList.list) }) // line B

autorun 接收一个函数，该函数同步执行过程中访问的 state 或计算值发生变化时，它会自动运行，另外，调用 autorun 时，该函数也会运行一次。使用 toDoList.addItem 方法往 list 数组中 push 一个事项，你会发现上述 line A 的函数会运行，但是 line B 的函数不会运行；使用 toDoList.fetchInitData 方法给 list 数组赋值，line A 和 line B 的函数都会运行，出现这种差异是因为 autorun 使用全等（===）运算符确定两个值是否相等，但它认为 NaN 等于 NaN 。

用如下一段代码验证 MobX 是否按照要求跟踪 ToDoItem 实例的 state 的变化：

import { autorun} from 'mobx'
autorun(() => {
  if (toDoList.list.length) {
       console.log(toDoList.list[0]?.status)
   }
})
reaction(() => toDoList.list.length, () => {
  toDoList.list[0].changeStatus(1)// 修改status的值
})

当 reaction 的第一个参数返回 true 时，它的第二个参数会自动执行,上述代码在 reaction 中修改 toDoItem 的 status 字段，修改之后 autorun 能成功运行一次。

MobX 与 React 集成

现在将上一步的 TODO List 与 React 结合，为此需要安装 mobx-react-lite 或 mobx-react，mobx-react 比 mobx-react-lite 的功能更多，同时它的体积也更大，如果你的项目只使用函数组件，那么推荐安装 mobx-react-lite 而非 mobx-react，为了演示更多的用法本小节安装 mobx-react。另外，本小节会用到装饰器语法，所以要将 TypeScript 编译器配置项 experimentalDecorators 设置为true。下面是一个 MobX + React 的简单示例：

import { observer } from 'mobx-react'
import toDoList, { Status } from '../../mobx/todo'
const ToDoListDemoGlobalInstance= observer(
  class extends React.Component<{}, {}> {
    componentDidMount() {
     // 3s之后修改 searchStatus 的值
      setTimeout(() => {
        toDoList.changeStatus(Status.finished)
      }, 3000);
    }
    render() {
      return (
        <div>searchStatus: {toDoList.searchStatus}</div>
      )
    }
  }
)

observer 是一个高阶组件，它会订阅组件在渲染期间访问的可观察对象，可观察对象指的是用 makeAutoObservable 、makeObservable 或 observable 转换之后的对象，当组件渲染期间访问的 state 和计算值发生变化时，组件会重新渲染。上述代码，组件被装载 3s 后将修改 searchStatus 的值，由于 render 方法访问了 searchStatus 的值，所以组件会重新渲染。observer 除了以高阶组件的形式使用之外，还能以装饰器的形式使用。

在组件中使用可观察对象

下面介绍 6 种在组件中使用 MobX 可观察对象的写法。

1. 访问全局的类实例

上一个示例代码便是在组件中直接访问全局的类实例，在这里不再举更多的示例代码。

2. 通过 props

这种方式是指将可观察对象通过 props 的形式传递到组件中，代码如下：

import { observer } from 'mobx-react'
import toDoList, { Status } from '../../mobx/todo'
@observer
class ToDoListDemoByProps extends React.Component<{toDoList: ToDoList}, {}> {
  componentDidMount() {
    setTimeout(() => {
      toDoList.changeStatus(Status.finished)
    }, 3000);
  }
  render() {
   // 读取props中的可观察对象
    return (
      <div>ToDoListDemoByProps - searchStatus: {this.props.toDoList.searchStatus}</div>
    )
  }
}
//使用ToDoListDemoByProps 
<ToDoListDemoByProps toDoList={toDoList}/>

3. 通过 React Context

这种方式是指通过 React Context 让可观察对象在整个被 Context.Provider 包裹的组件树中共享，代码如下：

import { observer } from 'mobx-react'
import toDoList, { Status, ToDoList } from '../../mobx/todo'
// 创建一个用observer包裹的函数组件
const ToDoListDemoByContext = observer(() => {
 // 在函数组件中使用Context
  const context = useContext(todoContext);
  useEffect(() => {
    setTimeout(() => {
      context.changeStatus(Status.finished)
    }, 3000);
  })
  return (
    <div>ToDoListDemoByContext - searchStatus: {context.searchStatus}</div>
  )
})
// 往Context传值
<todoContext.Provider value={toDoList}>
   <ToDoListDemoByContext/>
</todoContext.Provider>

4. 在组件中实例化 observable class 并存储它的实例

这种方式指的是在组件作用域中实例化类，并且将结果保存到组件的某个字段中，如果在函数组件中使用这种方式，那么还需要用到 useState。代码如下：

const ToDoListFuncDemoLocalInstance= observer(() => {
  // 实例化类
  const [ todoList ] = useState(() => new ToDoList())
  useEffect(() => {
    setTimeout(() => {
      // 使用实例方法更新状态
      todoList.changeStatus(Status.finished)
    }, 3000);
  })
  return (
    <div>ToDoListDemoLocalInstance - searchStatus: {todoList.searchStatus}</div>
  )
})

对于类组件而言，只需要将 new ToDoList() 的结果保存在它的实例属性上，之后在组件中访问该实例属性，代码如下：

@observer
class ToDoListClassDemoLocalInstance extends React.Component<{}, {}> {
  todoList = new ToDoList()
  // other
}

5. 在组件中调用 observable 方法创建可观察对象

这种方式不使用类去创建可观察对象，而是使用 observable 方法创建可观察对象，与第 4 种方式一样，如果在函数组件中还要用到 useState，代码如下

import { observable } from 'mobx'
const LocalObservableDemo = observer(() => {
 // 调用observable
  const [counter] = useState(() => observable({
    count: 0,
    addCount() {
      this.count ++
    }
  }))
  return <>
    <div>{counter.count}</div>
    <button onClick={() => counter.addCount()}>add</button>
  </>
})

上述代码使用 mobx 导出的 observable 方法创建一个可观察对象，并在函数组件使用该对象，当它的 count 属性值发生变化时，组件将重新渲染。对于类组件而言只需要将 observable 函数的结果保存到实例属性上即可。

6. 在函数组件中使用 useLocalObservable

useLocalObservable 是 useState + observable 简写版本，只能在函数组件中使用，代码如下：

import { observer, useLocalObservable } from 'mobx-react'
const UseLocalObservableDemo = observer(() => {
  const counter = useLocalObservable(() => ({
    count: 0,
    addCount() {
      this.count ++
    }
  }))
  return <>
    <div>{counter.count}</div>
    <button onClick={() => counter.addCount()}>add</button>
  </>
})

对于函数组件而言，useLocalObservable 只是一个自定义Hook，它返回一个可观察对象。

有多种方式让组件在渲染阶段使用可观察对象，不管是哪种方式，组件都必须具备观察能力，否则，当渲染期间访问的 state 和计算值发生变化时，组件不会重新渲染。笔者在使用 MobX 做状态管理时，最常用的方式是第 1 和第 2 种。第 4、5、6 种方式必要性不大。

让组件具备观察能力

observer 是让组件具备观察能力最常见的方式，在这里介绍另一种让组件具备观察能力的方式，即：Observer组件。用法如下：

import { Observer } from 'mobx-react'
class ObservableDemo extends React.Component<{},{}> {
  render() {
    return (
    <>
      <div>{toDoList.searchStatus || '-'}</div>  {/** lineA */}
      <Observer>
	{() => <div>{toDoList.searchStatus || '-'}</div>} {/** lineB */}
	</Observer>
    </>
    )
  }
}

Observer 组件会创建一个匿名的观察区域，在上述代码中，如果 toDoList.searchStatus 的值发生变化，那么 lineB 会重新渲染，但是 lineA 不会重新渲染。

总结

将 MobX 与 React 结合在一起的关键在于用 observer 包裹组件以及在组件中读取可观察对象，observer 不关心可观察对象从哪里来，也不关心如何读取可观察对象，只关心在组件中可观察对象是否可读。对于习惯面向对象编程的工程师而言，用 MobX 做状态管理会比用 Redux 做状态管理更得心应手。

以上就是Mobx 实现 React 应用的状态管理的详细内容，更多关于Mobx React 应用状态管理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react native图片解析流程详解

    react native图片解析流程详解

    这篇文章主要为大家介绍了react native图片解析流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 一文详解ReactNative状态管理rematch使用

    一文详解ReactNative状态管理rematch使用

    这篇文章主要为大家介绍了ReactNative状态管理rematch使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • React Fiber与调和深入分析

    React Fiber与调和深入分析

    Fiber可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-11-11
  • react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    react使用antd的上传组件实现文件表单一起提交功能(完整代码)

    最近在做一个后台管理项目，涉及到react相关知识，项目需求需要在表单中带附件提交，怎么实现这个功能呢？下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能，一起看看吧
    2021-06-06
  • react解析html字符串方法实现

    react解析html字符串方法实现

    在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,本文主要介绍了react解析html字符串方法实现,感兴趣的可以了解一下
    2023-12-12
  • React 高阶组件入门介绍

    React 高阶组件入门介绍

    本篇文章主要介绍了React高阶组件入门介绍，这篇文章中我们详细的介绍了什么是高阶组件，如何使用高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React 组件间的通信示例

    React 组件间的通信示例

    这篇文章主要介绍了React 组件间的通信示例，主要通信划分为三种，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Router添加路由拦截方法讲解

    Router添加路由拦截方法讲解

    在vue项目中使用vue-router做页面跳转时，路由的方式有两种，一种是静态路由，另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截
    2023-03-03
  • React中mobx和redux的区别及说明

    React中mobx和redux的区别及说明

    这篇文章主要介绍了React中mobx和redux的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • React Streaming SSR原理示例深入解析

    React Streaming SSR原理示例深入解析

    这篇文章主要为大家介绍了React Streaming SSR原理示例深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12

最新评论