MobX使用杂文

1. 导入 React 和 MobX 相关模块

import React, { createContext, useContext } from 'react';
import RootStore from './RootStore';

• React: 引入 React 库。
• createContext 和 useContext: React 提供的用于创建和使用上下文的钩子。
• RootStore: 你之前定义的 MobX 根 store，它包含了所有子 store 的实例。

2. 创建一个上下文

const StoreContext = createContext(new RootStore());

• createContext: 创建一个新的上下文对象 StoreContext。
• new RootStore(): 创建 RootStore 的一个实例，并将其作为上下文的默认值。

3. 上下文的作用

上下文的作用是使 RootStore 实例可以在应用的任何地方被访问，而不需要通过层层的 props 传递。通过上下文，你可以在任何组件中使用 useContext 钩子来获取 RootStore 实例。

使用示例

创建 StoreProvider 组件

你可以创建一个 StoreProvider 组件，用于将 StoreContext 提供给整个应用：

export const StoreProvider = ({ children }) => {
  return (
    <StoreContext.Provider value={new RootStore()}>
      {children}
    </StoreContext.Provider>
  );
};

• StoreProvider: 自定义的上下文提供者组件。
• children: 这个组件的子组件。

使用 useStore 钩子

为了方便在组件中使用上下文，你可以创建一个自定义钩子 useStore：

export const useStore = () => useContext(StoreContext);

• useStore: 自定义的钩子，它使用 useContext 来获取 StoreContext 的值，即 RootStore 实例。

在组件中使用

在任何需要访问 RootStore 的组件中，你可以使用 useStore 钩子：

import React from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from '../stores';

const SomeComponent = observer(() => {
  const { productStore, cartStore } = useStore();

  // 你可以在这里使用 productStore 和 cartStore 的方法和属性
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
});

export default SomeComponent;

mobx-react 和 mobx-react-lite 都是用于在 React 应用中集成 MobX 的库，但它们有一些关键区别：

mobx-react

• 功能：提供装饰器（decorators）、Provider、inject 和其他高阶组件（HOCs）。
• 支持的组件类型：支持类组件和函数组件。
• 适用场景：适合需要更多高级特性的大型应用，如基于上下文的注入和高阶组件。

mobx-react-lite

• 功能：主要基于 React Hooks 的简化版，不支持装饰器和高阶组件。
• 支持的组件类型：主要支持函数组件。
• 适用场景：适合现代 React 应用，尤其是那些使用 hooks 并且希望使用更轻量级解决方案的项目。

主要区别

• 体积：mobx-react-lite 更小、更轻量。
• API：mobx-react 支持类组件和函数组件，而 mobx-react-lite 主要关注函数组件和 hooks。
• 装饰器：mobx-react 支持装饰器，而 mobx-react-lite 不支持。

示例代码

mobx-react

import { observer, inject } from 'mobx-react';

@inject('store')
@observer
class MyComponent extends React.Component {
  render() {
    const { store } = this.props;
    return <div>{store.someValue}</div>;
  }
}

mobx-react-lite

import { observer } from 'mobx-react-lite';
import { useStore } from './storeContext';

const MyComponent = observer(() => {
  const store = useStore();
  return <div>{store.someValue}</div>;
});

根据项目的复杂度和需求选择合适的库。对于新项目，通常推荐使用 mobx-react-lite，因为它更简单且符合现代 React 的开发方式。