如何将mobx store注入无状态组件

在使用MobX时，我们通常会在React组件中使用observer函数来观察状态的变化并重新渲染组件。对于无状态组件（无状态函数组件），我们仍然可以利用React的useContext钩子或高阶组件（HOC）来访问和注入store。以下是两种常见的方法来实现这一点：

方法1：使用useContext钩子

如果你的store是通过React的Context API提供的，你可以在无状态组件中使用useContext钩子来访问MobX store。首先，确保你的store被包含在一个Context中，并通过Provider在应用的某个层级上提供这个store。

jsx
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from './StoreProvider'; // 假设你的store被这样提供

const MyComponent = observer(() => {
  const store = useContext(StoreContext); // 使用useContext获取store

  return <div>{store.someValue}</div>;
});

export default MyComponent;

在这个例子中，StoreContext是一个Context对象，它被用来通过React的Context API传递MobX store。MyComponent是一个观察者组件，能够响应store中的状态变化。

方法2：使用高阶组件（HOC）

另一种方法是创建一个高阶组件，该高阶组件封装了observer和对store的引用。这种方法在早期的React版本中比较常见，尤其是在Hooks出现之前。

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

const withStore = (Component) => inject('store')(observer(Component));

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

export default withStore(MyComponent);

在这个例子中，withStore是一个高阶组件，它从上下文中注入store并使MyComponent成为一个观察者。这样，MyComponent就能够访问到通过inject注入的store并响应其变化。

总结

使用useContext是在函数组件中注入MobX store的更现代和简洁的方式，而HOC方法则适用于老旧项目或那些尚未使用Hooks的代码库。在实际开发中，建议根据项目的具体情况和团队的偏好选择合适的方法。