mobx hook中的使用

class

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

// 需要使用mobx-react提供的Provider 包裹，需要使用的值直接使用props传递

import { Provider } from "mobx-react";

<Provider {...store}>{children}</Provider>

// inject把需要使用的值放到props里

// 这里使用的observer来自mobx-react

@inject('store')

@observer

class A extends React.Component {

    ...

    this.props.store.value

}

function

import { createContext, useContext } from 'react';

const store = {

    ...

}

// createContext接受一个参数，该参数是Ctx.Provider上的value的默认值，没有默认值就给null

const Ctx = createContext(store);

const {Provider ,Consumer} = Ctx;

// useContext接受createContext创建的context对象

// useContext返回Ctx.Provider上的value值

const useStore = () => useContext(Ctx);

// 使用的时候需要被Ctx.Provider包裹，把对象赋给value

<Ctx.Provider value={store}>

</Ctx.Provider>

<Consumer>{value => ...}</Consumer>

// function component 需要用mobx-react-lite里observer处理

// class使用的mobx-react里的observer，这里是不同的

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

const B: React.FC =e () => {

    // 可以直接解构拿值

    const store = useStore();

}

export observer(B);

项目中的运用class

// apps\link\src\solutions\biz-form\page\menu-buttons\pur-order-generate\PurOrderGenerate.tsx

import * as React from "react";

import { BizFormPresenter } from '../presenter/BizFormPresenter';

const context = React.createContext<BizFormPresenter>(null);

export const PresenterProvider = context.Provider;

// class 使用方法

export const PresenterConsumer = context.Consumer;

// function 使用方法

export const useBizFormPresenter = () => React.useContext(context);

@contextProvider(PresenterConsumer, 'presenter')

@observer

export class PurOrderGenerateBtn extends React.Component<{

  presenter?: BizFormPresenter;

  entityName: string;

}> {

}

export function contextProvider<P1, P2, PassName extends string = 'passContextValue'>(ContextConsumer: React.ComponentType<React.ConsumerProps<P2>>, passPropName: PassName = "passContextValue") {

    return (ComponentClass: React.ComponentType<P1 & { [key in PassName]?: P2 }>) => {

        class WrappedComponent extends React.PureComponent<P1 & { [key in PassName]?: P2 } & { passContextValue?: P2 }> {

            render() {

                return (

                    <ContextConsumer>

                        {

                            (value: P2) => {

                                const passProps: { [key in PassName]: P2 } = {

                                    [passPropName]: this.props[passPropName] || value

                                } as any;

                                return (

                                    <ComponentClass {...this.props} {...passProps} />

                                );

                            }

                        }

                    </ContextConsumer>

                );

            }

        };

        hoistNonReactStatics(WrappedComponent, ComponentClass);

        return WrappedComponent as any;

    }

}

项目中的运用hook

// apps\link\src\main\screens\purchase\pur-comparison\form\customizeRightButtons.tsx

const context = React.createContext<BizFormPresenter>(null);

const CustomizeRightButtons: React.FC<CustomizeRightButtonsPropsModel> = (props) => {

  const presenter = useBizFormPresenter();

  return (

    <>

    {presenter.api.getFrom().value}

    </>

  );

};

export default observer(CustomizeRightButtons);

不需要响应式

//直接调用

store.value

useLocalObservable

import { Observer, useLocalObservable } from "mobx-react-lite";

export default function MobxCount() {

  // 可以用来代替 useState useCallBack

  const state = useLocalObservable(() => ({

    count: 10,

    increment() {

      state.count++;

    },

    decrement() {

      state.count--;

    },

  }));

  return (

    <div>

      <Observer>{() => <div>{state.count}</div>}</Observer>

      <button

        onClick={() => {

          state.decrement();

        }}

      >

        decrement

      </button>

      <button

        onClick={() => {

          state.increment();

        }}

      >

        increment

      </button>

    </div>

  );

}