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

news2024/11/25 12:24:03

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 和状态提供更好的类型检查支持。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用CRMEB多店版，看品牌连锁店如何做电商

用CRMEB多店版，看品牌连锁店如何做电商

2023年&#xff0c;被很多人认为是充满希望的一年&#xff0c;受社会环境影响消沉三年的实体商业仿佛看到了希望&#xff0c;都准备在今年大展身手。再看市场&#xff0c;经过3年的发展&#xff0c;很多线下实体店铺的线上商业布局已经小有成效&#xff0c;线下连锁品牌店线上化…
阅读更多...
服务器配置环境步骤

服务器配置环境步骤

1、创建虚拟环境 conda create --name 名字 pythonpython版本号2、进入虚拟环境 conda activate 名字3、确认自己要安装的torch版本和torchvision版本&#xff0c;进入https://pytorch.org/get-started/previous-versions/ 复制相应的命令&#xff0c;运行即可 注&#xff1a…
阅读更多...
MVCC（解决MySql中的并发事务的隔离性）

MVCC（解决MySql中的并发事务的隔离性）

MVCC 如何保证事务的隔离性&#xff1f; 1.排他锁&#xff1a;如一个事务获取了一个数据行的排他锁&#xff0c;其他事务就不能再获取改行的其他锁。 2.MVCC&#xff1a;多版本并发控制。 MVCC&#xff1a; 1.隐藏字段 1.DB_TRX_ID&#xff1a;最近修改事务的id。默认值从0开…
阅读更多...
React添加到现有项目

React添加到现有项目

1.检查现有项目的根目录下是否有package.json文件 如果没有&#xff0c;则在项目的根目录下初始化一个package.json配置文件 2.在根目录下安装react和react-dom依赖 npm install --save react react-dom react-scripts安装成功后&#xff0c;react、react-dom以及react-scr…
阅读更多...
RPA实战演练UiBot6.0新食堂一楼问卷星（类似于之前的网页表单提交）

RPA实战演练UiBot6.0新食堂一楼问卷星（类似于之前的网页表单提交）

要使用RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;帮助新食堂进行调查问卷&#xff0c;我们可以结合UiBot 6.0来实施具体的计划。以下是一个大致的实战演练计划&#xff1a; 一、目标与需求分析 明确调查目标&#xff1a;了解新食堂…
阅读更多...
小间距LED显示屏拼接器的技术详解

小间距LED显示屏拼接器的技术详解

随着科技的不断进步&#xff0c;小间距LED显示屏因其无缝拼接、高清晰度和卓越的显示效果&#xff0c;在众多高端应用场合成为首选。然而&#xff0c;要充分发挥这些优势&#xff0c;不仅需要LED显示屏本身的高质量图像处理和精湛的组装工艺&#xff0c;还需要一个强大的图像拼…
阅读更多...
Java 语言程序设计（基础篇）原书第10版 梁勇著 PDF 文字版电子书

Java 语言程序设计（基础篇）原书第10版 梁勇著 PDF 文字版电子书

简介 Java 语言程序设计&#xff08;基础篇&#xff09;原书第 10 版 是 Java 语言的经典教材&#xff0c;中文版分为基础篇和进阶篇&#xff0c;主要介绍程序设计基础、面向对象程序设计、GUI 程序设计、数据结构和算法、高级 Java 程序设计等内容。本书通过示例讲解问题求解…
阅读更多...
【python】图像边缘提取效果增强方法-高斯模糊

【python】图像边缘提取效果增强方法-高斯模糊

一、介绍 高斯模糊是一种常用的图像处理技术&#xff0c;用于减少图像中的噪声和细节。它通过对图像中的每个像素点进行加权平均来实现模糊效果。具体而言&#xff0c;高斯模糊使用一个高斯核函数作为权重&#xff0c;对每个像素点周围的邻域进行加权平均。这样可以使得每个像…
阅读更多...
Golang ProtoBuf 初学者完整教程：语法

Golang ProtoBuf 初学者完整教程：语法

一、编码规范推荐 1、文件名使用小写下划线的命名风格&#xff0c;例如 lower_snake_case.proto 2、使用 2 个空格缩进 3、包名应该和目录结构对应 4、消息名使用首字母大写驼峰风格(CamelCase)&#xff0c;例如message StudentRequest { ... } 5、字段名使用小写下划线的风格…
阅读更多...
【优选算法专栏】专题十：哈希表（一）

【优选算法专栏】专题十：哈希表（一）

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…
阅读更多...
【springboot开发】MVC和SSM

【springboot开发】MVC和SSM

前言&#xff1a;关于MVC和SSM基本内容的梳理&#xff0c;以及两者之间的关系。 文章目录 1. 三层架构2. MVC3. SSM 1. 三层架构 三层架构是指&#xff1a; 视图层view&#xff08;表现层&#xff09;: 用于显示数据和接收用户输入的数据&#xff0c;为用户提供一种交互式操作…
阅读更多...
cpufreq --- 漏洞

cpufreq --- 漏洞

我在12日早上发现并上传该漏洞到mainlist&#xff0c; 被毫无道德底线和丑恶人性的印度人截胡了. 这个贪婪、自私的印度人看了我的patch后首先说了一封冠冕堂皇的邮件给我让我不要再次修复&#xff0c;下午2点&#xff0c;人性的丑恶在这厮身上全部散发出来了&#xff0c;它用另…
阅读更多...
Unity中图片和Base64字符串之间的转换

Unity中图片和Base64字符串之间的转换

大家好&#xff0c;我是阿赵。   这次来讲一下在unity引擎里面&#xff0c;图片和base64字符串的互相转换问题。 一、图片传输的多种方式 有时候我们需要把图片通过网络传输发送。   在Unity里面&#xff0c;有不止一种方式可以实现&#xff0c;比如说&#xff0c;把图片的…
阅读更多...
HarmonyOS4 页面路由

HarmonyOS4 页面路由

Index.ets: import router from ohos.routerclass RouterInfo {// 页面路径url: string// 页面标题title: stringconstructor(url: string, title: string) {this.url urlthis.title title} }Entry // 入口組件 Component struct Index {State message: string 页面列表// …
阅读更多...
java快速幂算法

java快速幂算法

快速幂算法 参考视频(参考五角七边up大佬&#xff09; 幂运算的介绍 幂运算是指将一个数自身乘以自身多次的运算&#xff0c;其表达式为 a n a^n an&#xff0c;其中 a a a 是底数&#xff0c; n n n 是指数。 快速幂解释 快速幂算法是一种用于快速计算幂运算的算法&…
阅读更多...
MySQL的基础操作(二)

MySQL的基础操作(二)

目录 一.数据库约束 1.主键约束 (Primary Key) 2.唯一约束 (Unique) 3.外键约束 (Foreign Key): 4.检查约束(Check) 5.默认约束 (Default) 二.聚合查询 1.简单聚合函数 2.GROUP BY子句 3.HAVING子句 三.联合查询 1.内连接 2.左连接 3.右连接 4.子查询 5.合并查询…
阅读更多...
OpenHarmony开发——CMake方式组织编译的库移植

OpenHarmony开发——CMake方式组织编译的库移植

概述 本文为OpenHarmony开发者提供一些组织编译形式比较常见&#xff08;CMakeLists、Makefile&#xff09;的三方库的移植指南&#xff0c;该指南当前仅适用于Hi3516DV300和Hi3518EV300两个平台&#xff0c;文中着重介绍各编译组织方式下工具链的设置方法以及如何将该库的编译…
阅读更多...
NJU PA0

NJU PA0

NJU PA0 使用教程提供的源再进行sudo apt install … 可能会出现 Unmet dependencies 此类报错 可以安装 aptitude sudo apt install aptitude sudo aptitude install <package>然后它会提示你&#xff0c;选 n 进行降级。再选 Y 确认 或者 将 /etc/apt/sources.list 下…
阅读更多...
SpringSecurity登录时在哪里调用我们自定义的UserDetailsServiceImpl

SpringSecurity登录时在哪里调用我们自定义的UserDetailsServiceImpl

SpringSecurity登录时在哪里调用我们自定义的UserDetailsServiceImpl 1、请求login方法 2、将用户的用户名和密码封装成一个对象&#xff0c;以便进行后续的认证操作 3、执行认证操作 4、调用providermanager类的authenticate 5.进入这一步就开始跟我们自定义实现的UserDet…
阅读更多...
带头结点的双向循环链表操作集

带头结点的双向循环链表操作集

分数 50 作者 伍建全 单位 重庆科技大学 本题要求实现一个带头结点的双向循环链表操作集。 函数接口定义&#xff1a; typedef int dataType;typedef struct _node {dataType data;struct _node *prev;//指向前驱的指针struct _node *next;//指向后继的指针 }node;typedef…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023