React组件inject与observer及其使用介绍

MobX数据注入与监听概述

MobX是一个简单而强大的状态管理库，它可以帮助你轻松地管理应用程序的状态。MobX的核心思想是可观察状态，这意味着当状态发生变化时，MobX会自动通知所有依赖于该状态的组件。

在React中，可以使用inject和observer来实现数据注入和监听。inject是一个高阶组件，它可以将mobx的store注入到React组件中。observer是一个装饰器，它可以使React组件成为一个mobx观察者。

inject与observer的使用场景

• 当你需要在React组件中使用mobx的store时，可以使用inject来将store注入到组件中。
• 当你需要在React组件中监听mobx的store时，可以使用observer来使组件成为一个mobx观察者。

inject与observer的用法

• 使用inject来注入store:

import { inject } from "mobx-react";

const MyComponent = inject("store")(props => {
  const { store } = props;

  return (
    <div>
      <h1>{store.count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

export default MyComponent;

• 使用observer来监听store:

import { observer } from "mobx-react";

const MyComponent = observer(props => {
  const { store } = props;

  return (
    <div>
      <h1>{store.count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

export default MyComponent;

context的用法

除了inject和observer之外，还可以使用context来实现数据注入和监听。context是一个全局对象，它可以在组件树中传递数据。

• 使用context来注入store:

import React from "react";

const StoreContext = React.createContext(null);

const MyComponent = props => {
  const store = React.useContext(StoreContext);

  return (
    <div>
      <h1>{store.count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
};

export default MyComponent;

• 使用context来监听store:

import React from "react";
import { observer } from "mobx-react";

const StoreContext = React.createContext(null);

const MyComponent = observer(props => {
  const store = React.useContext(StoreContext);

  return (
    <div>
      <h1>{store.count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

export default MyComponent;

总结

inject、observer和context都是实现React组件数据注入和监听的有效方法。你可以根据自己的需要选择合适的方法。