MobX进阶:从基础到高级特性全面探索

MobX 提供了丰富的高级特性,包括计算属性、反应式视图、中间件、异步流程控制、依赖注入和动态 observable 、在服务端渲染和 TypeScript 支持方面提供了良好的集成。这些特性进一步增强了 MobX 在状态管理方面的灵活性和可扩展性,使其成为一个功能强大、易于使用的状态管理解决方案。
在这里插入图片描述

下面分别通过示例代码进行说明。

  1. 计算属性(computed properties):
import { observable, computed } from 'mobx';

class TodoStore {
  @observable todos = [];

  @computed get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }

  @computed get incompleteTodos() {
    return this.todos.filter(todo => !todo.completed);
  }
}

const todoStore = new TodoStore();
todoStore.todos.push({ text: 'Learn MobX', completed: true });
todoStore.todos.push({ text: 'Build an app', completed: false });

console.log(todoStore.completedTodos.length); // 1
console.log(todoStore.incompleteTodos.length); // 1

在这个例子中,我们定义了两个计算属性 completedTodos 和 incompleteTodos。当 todos 数组发生变化时,这两个计算属性会自动更新。

  1. 反应式视图(reactive views):
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';

const counterStore = observable({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={counterStore.increment}>Increment</button>
      <button onClick={counterStore.decrement}>Decrement</button>
    </div>
  );
});

在这个例子中,我们使用 observer 高阶组件包裹了 Counter 组件。这使得组件能够自动响应 counterStore 中可观察状态的变化。

  1. 中间件(middleware):
import { observable, configure } from 'mobx';

// 定义一个日志中间件
const logger = store => {
  let prevState = store.getState();

  return next => {
    return action => {
      console.log('prev state', prevState);
      const nextState = next(action);
      console.log('next state', store.getState());
      prevState = store.getState();
      return nextState;
    };
  };
};

// 应用中间件
configure({
  enforceActions: 'observed',
  middleware: [logger]
});

const counterStore = observable({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

counterStore.increment();
// 控制台输出:
// prev state { count: 0 }
// next state { count: 1 }

在这个例子中,我们定义了一个简单的日志中间件,在 action 执行前后打印状态信息。通过将中间件应用到 MobX 的配置中,我们可以扩展 MobX 的功能。

  1. 异步操作与 runInAction:
import { observable, action, runInAction } from 'mobx';

class TodoStore {
  @observable todos = [];
  @observable loading = false;
  @observable error = null;

  @action
  async fetchTodos() {
    this.loading = true;
    try {
      const response = await fetch('/api/todos');
      const data = await response.json();
      runInAction(() => {
        this.todos = data;
        this.loading = false;
        this.error = null;
      });
    } catch (err) {
      runInAction(() => {
        this.error = err.message;
        this.loading = false;
      });
    }
  }
}

const todoStore = new TodoStore();
todoStore.fetchTodos();

在这个例子中,我们使用 runInAction 来确保异步操作中状态更新的原子性。无论是更新 todos 还是 loading 和 error 状态,都会包裹在 runInAction 中,确保状态的一致性。

  1. Flows

MobX 提供了一个名为 flow 的生成器函数,可以帮助我们更好地管理异步操作。flow 可以让我们编写同步风格的异步代码,同时仍能享受 MobX 的自动依赖追踪和状态更新机制。

import { observable, flow } from 'mobx';

class TodoStore {
  @observable todos = [];
  @observable loading = false;
  @observable error = null;

  fetchTodos = flow(function* () {
    this.loading = true;
    try {
      const response = yield fetch('/api/todos');
      const data = yield response.json();
      this.todos = data;
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  });
}

const todoStore = new TodoStore();
todoStore.fetchTodos();

使用 flow 可以让异步操作的代码更加简洁和易读。同时,flow 也能确保状态更新的原子性,避免了部分状态更新的问题。

  1. 依赖注入

MobX 支持依赖注入,这使得在大型应用中管理 Store 变得更加灵活和可扩展。我们可以使用 inject 高阶组件或 useLocalStore 钩子注入 Store 实例到组件中。

import { useLocalStore } from 'mobx-react-lite';

const TodoList = () => {
  const todoStore = useLocalStore(() => new TodoStore());

  return (
    <div>
      {todoStore.todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
};

在这个例子中,我们使用 useLocalStore 钩子创建了一个局部的 TodoStore 实例。这样可以确保每个组件实例都有自己独立的状态管理。

  1. 动态 observable

有时我们需要在运行时创建可观察的数据结构。MobX 提供了 observable.map、observable.set 和 observable.array 等 API 来动态创建可观察的集合。

import { observable } from 'mobx';

class TodoStore {
  @observable todos = observable.map();

  addTodo(id, text) {
    this.todos.set(id, { id, text, completed: false });
  }

  toggleTodo(id) {
    const todo = this.todos.get(id);
    todo.completed = !todo.completed;
  }
}

const todoStore = new TodoStore();
todoStore.addTodo(1, 'Learn MobX');
todoStore.addTodo(2, 'Build an app');
todoStore.toggleTodo(1);

在这个例子中,我们使用 observable.map 创建了一个可观察的 Map 来存储 todos。这样我们可以在运行时动态添加和修改 todos,同时 MobX 也能自动追踪这些变化,确保相关组件能够正确更新。

好的,我来给出 MobX 在服务端渲染和 TypeScript 支持方面的示例代码。

  1. 服务端渲染

在服务端渲染中使用 MobX 需要一些额外的配置,主要包括:

  • 在服务端创建 MobX 的 Store 实例
  • 在渲染页面之前,先让 Store 完成数据加载
  • 在客户端重新挂载时,将服务端渲染的状态传递给客户端 Store

以下是一个简单的示例:

// server.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'mobx-react';
import TodoStore from './TodoStore';

const app = (req, res) => {
  const todoStore = new TodoStore();
  await todoStore.fetchTodos();

  const html = renderToString(
    <Provider todoStore={todoStore}>
      <TodoApp />
    </Provider>
  );

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>MobX SSR Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(todoStore.snapshot)};
        </script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
};

在客户端, TodoApp 组件可以通过 useLocalStore 钩子来获取预加载的 Store 实例:

// client.js
import React from 'react';
import { useLocalStore } from 'mobx-react-lite';
import TodoStore from './TodoStore';

const TodoApp = () => {
  const todoStore = useLocalStore(
    () => new TodoStore(window.__INITIAL_STATE__)
  );

  return (
    <div>
      {todoStore.todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
};
  1. TypeScript 支持

MobX 与 TypeScript 有着良好的集成,可以充分利用 TypeScript 的类型检查和智能提示功能。下面是一个使用 TypeScript 的 MobX 示例:

// TodoStore.ts
import { observable, action, computed } from 'mobx';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

class TodoStore {
  @observable todos: Todo[] = [];
  @observable loading: boolean = false;
  @observable error: string | null = null;

  @action
  addTodo(text: string) {
    this.todos.push({
      id: this.todos.length + 1,
      text,
      completed: false
    });
  }

  @action
  toggleTodo(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  @computed
  get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }

  @computed
  get incompleteTodos() {
    return this.todos.filter(todo => !todo.completed);
  }
}

export default TodoStore;

在这个例子中,我们定义了 Todo 接口来描述待办事项的数据结构。在 TodoStore 中,我们使用 TypeScript 的类型注解来声明可观察状态、actions 和计算属性。
这样做可以在开发过程中获得更好的类型检查和智能提示,提高代码质量和可维护性。当与 React 组件集成时,TypeScript 也可以为组件的 props 和状态提供更好的类型检查支持。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/538710.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【NLP练习】调用Gensim库训练Word2Vec模型

【NLP练习】调用Gensim库训练Word2Vec模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、准备工作 1.安装Gensim库 使用pip安装&#xff1a; !pip install gensim2. 对原始语料分词 选择《人民的民义》的小说原文作为语料&#xff0c;先采用…
阅读更多...
在Windows 10中打开PowerShell的几种方法，总有一种适合你

在Windows 10中打开PowerShell的几种方法，总有一种适合你

PowerShell是一种比命令提示符更强大的命令行shell和脚本语言。自Windows10发布以来，它已成为默认选择，并且有许多方法可以打开它。 PowerShell和命令提示符之间的区别是什么 PowerShell的使用更复杂，但它比命令提示符强大得多。这就是为什么它成为超级用户和it专业人员的…
阅读更多...
CTF之Flask_FileUpload

CTF之Flask_FileUpload

拿到题目就一个上传文件的网页 查看源码&#xff0c;发现注释告诉我们会运行python的文件&#xff0c;但是系统只能上传图片格式&#xff08;这个是自己尝试知道的&#xff09; 那我们就写一个python代码改成jpg或者png格式的文件 内容为 import os os.system(cat /flag) 上传…
阅读更多...
算法 囚犯幸存者

算法 囚犯幸存者

题目 主类 public static List<Prisoner> prisoners new ArrayList<Prisoner>(); public static List<Prisoner> remainPrisoners new ArrayList<Prisoner>(); public static Prisoner lastPrisoner null;public static void main(String[] args) …
阅读更多...
jeecg-boot安装

jeecg-boot安装

我看大家都挺关注&#xff0c;所以集中上传了下代码和相关工具&#xff0c;方便大家快速完成 链接&#xff1a;https://pan.baidu.com/s/1-Y9yHVZ-4DQFDjPBWUk4-A 提取码&#xff1a;op1r 1. 下载代码 下载地址 : JEECG官方网站 - 基于BPM的低代码开发平台(低代码平台_零代…
阅读更多...
单链表的应用

单链表的应用

上篇博客中&#xff0c;我们学习了单链表&#xff0c;为了更加熟练掌握这一知识点&#xff0c;就让我们将单链表的应用操练起来吧&#xff01; 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 思路一&#xff1a;遍历原链表&#xff0c;将值为val的节点释放掉。 …
阅读更多...
华为校园公开课走入上海交大，鸿蒙成为专业核心课程

华为校园公开课走入上海交大，鸿蒙成为专业核心课程

4月12日&#xff0c;华为校园公开课在中国上海交通大学成功举办&#xff0c;吸引了来自计算机等相关专业的150余名学生参加。据了解&#xff0c;由吴帆、陈贵海、过敏意、吴晨涛、刘生钟等教授在中国上海交通大学面向计算机系本科生开设的《操作系统》课程&#xff0c;是该系学…
阅读更多...
CS224N第二课作业--word2vec与skipgram

CS224N第二课作业--word2vec与skipgram

文章目录 CS224N: 作业2 word2vec (49 Points)1. Math: 理解 word2vec计算 J n a i v e − s o f t m a x ( v c , o , U ) J_{naive-softmax}(v_c, o, U) Jnaive−softmax​(vc​,o,U) 关于 v c v_c vc​ 的偏导数计算 J n a i v e − s o f t m a x ( v c , o , U ) J_{na…
阅读更多...
【SpringBoot】mybatis-plus实现增删改查

【SpringBoot】mybatis-plus实现增删改查

mapper继承BaseMapper service 继承ServiceImpl 使用方法新增 save,updateById新增和修改方法返回boolean值,或者使用saveOrUpdate方法有id执行修改操作,没有id 执行新增操作 案例 Service public class UserService extends ServiceImpl<UserMapper,User> {// Au…
阅读更多...
第四百五十六回

第四百五十六回

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 使用方法 3. 内容总结 我们在上一章回中介绍了"overlay_tooltip用法"相关的内容&#xff0c;本章回中将介绍onBoarding包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的onBo…
阅读更多...
Python 以点生成均匀二维圆点数据

Python 以点生成均匀二维圆点数据

已知一个数&#xff0c;但这个数不是最对的&#xff0c;最对的可能在它附近&#xff0c;想要从附近随机生成一群数&#xff0c;放入模型中暴力查找最对的那个值。 以下是代码片段 n 800 # 个数 m 2 # 角度&#xff0c;只有2才是均匀的&#xff0c;1为半圆&#xff0c;以此类…
阅读更多...
HashMap的常见问题

HashMap的常见问题

Entry中的hash属性为什么不直接使用key的hashCode()返回值呢&#xff1f; 不管是JDK1.7还是JDK1.8中&#xff0c;都不是直接用key的hashCode值直接与table.length-1计算求下标的&#xff0c;而是先对key的hashCode值进行了一个运算&#xff0c;JDK1.7和JDK1.8关于hash()的实现…
阅读更多...
1. Django建站基础

1. Django建站基础

1. Django建站基础 学习开发网站必须了解网站的组成部分, 网站类型, 运行原理和开发流程. 使用Django开发网站必须掌握Django的基本操作, 比如创建项目, 使用Django的操作指令以及开发过程中的调试方法.1.1 网站的定义及组成 网站(Website)是指在因特网上根据一定的规则, 使用…
阅读更多...
C++高级特性：柯里化过程与std::bind（六）

C++高级特性：柯里化过程与std::bind（六）

1、柯里化过程 1.1、operator()的引入 现在需要完成这样一个需求&#xff1a;有一个函数每次调用返回的结果不一样。例如&#xff1a;两次调用的返回值都不一样那么就可以达到这种目的 1.1.1、简单点的写法 可以给一个全局的变量&#xff08;静态变量&#xff09;&#xff…
阅读更多...
竞赛课第六周（树状数组的应用）

竞赛课第六周（树状数组的应用）

实验内容: HDU 1166 敌兵布阵【线段树】 线段树的应用 敌兵布阵 C国的死对头A国这段时间正在进行军事演习&#xff0c;所以C国间谍头子Derek和他手下Tidy又开始忙乎了。A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况。由于采取…
阅读更多...
批量发送朋友圈还能自动同步朋友圈

批量发送朋友圈还能自动同步朋友圈

现在不管是做服装店、水果店、化妆店、影楼、二手车房等各行各业来说&#xff0c;每天必不可少的就是发各种朋友圈&#xff0c;量大号又多还占手机内存&#xff0c;真!的!很!累! 没有人能拒绝一键转发带来的方便&#xff0c;有了它发朋友圈只需要点一下就复制到了你自己的朋友圈…
阅读更多...
tkinter窗口

tkinter窗口

简单的窗口程序 导入所需的库 from tkinter import * import json 创建一个主窗口 app Tk() 设置窗口大小为 1048x2048 app.geometry(“1048x2048”) 设置窗口背景为灰色 app.configure(bg“gray”) 创建一个 Label 对象&#xff0c;显示 “账号&#xff1a;” 和红色…
阅读更多...
finalshell连接VM虚拟机报错，java,net.ConnectException: Connection timed out: connect

finalshell连接VM虚拟机报错，java,net.ConnectException: Connection timed out: connect

适用于&#xff0c;所有第三方连接虚拟机报错。 java,net.ConnectException: Connection timed out: connect Xshell啊什么的。 解决方法&#xff1a; 首先&#xff0c;我想确认一下是否已经安装了finalshell软件并且要连接的CentOS 7服务器已经设置好了。连接不上的问题有很…
阅读更多...
二叉树-认识树及堆，堆的实现

二叉树-认识树及堆，堆的实现

一、树的概念及结构 &#xff08;一&#xff09;树的概念 树是一种非线性的数据结构&#xff0c;是n(n≥0)个结点的有限集。当n0时&#xff0c;称为空树。在任意一颗非空树中应满足&#xff1a; 有且仅有一个特殊的结点&#xff0c;称为根结点&#xff0c;根节点没有前驱结点…
阅读更多...
STM32F407+DHT11采集数据

STM32F407+DHT11采集数据

1、DHT11简介 DHT11 与单片机之间能采用简单的单总线进行通信&#xff0c;仅仅需要一个 I/O 口。传感器内部湿度和温度数据 40Bit 的数据一次性传给单片机&#xff0c;数据采用校验和方式进行校验&#xff0c;有效的保证数据传输的准确性。DHT11 功耗很低&#xff0c;5V 电源电…
阅读更多...
最新文章

Copyright @ 2022~2023