1. 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
    }
  2. 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);
  3. 项目中的运用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;
    }
    }
  4. 项目中的运用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);
  5. 不需要响应式

    //直接调用
    store.value
  6. 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>
    );
    }

mobx hook中的使用的更多相关文章

  1. MobX 在 hook 中的使用

    关于 mobX 在 react 16.8.0 以上的用法 以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; ...

  2. hook中ref使用

    hook使用ref 父组件: 引入                  useRef 声明ref的名字     const dateRef = useRef() 复值给组件         ref={d ...

  3. TS基础应用 & Hook中的TS

    说在前面 本文难度偏中下,涉及到的点大多为如何在项目中合理应用ts,小部分会涉及一些原理,受众面较广,有无TS基础均可放心食用. **>>>> 阅完本文,您可能会收获到< ...

  4. React MobX 开始

    MobX 用于状态管理,简单高效.本文将于 React 上介绍如何开始,包括了: 了解 MobX 概念 从零准备 React 应用 MobX React.FC 写法 MobX React.Compon ...

  5. CI框架源码阅读笔记6 扩展钩子 Hook.php

    CI框架允许你在不修改系统核心代码的基础上添加或者更改系统的核心功能(如重写缓存.输出等).例如,在系统开启hook的条件下(config.php中$config['enable_hooks'] = ...

  6. Linux LSM(Linux Security Modules) Hook Technology

    目录 . 引言 . Linux Security Module Framework Introduction . LSM Sourcecode Analysis . LSMs Hook Engine: ...

  7. Git Server & Git Hook

    http://ju.outofmemory.cn/entry/16893 我喜欢 github,我现在的个人代码全部是托管在上面了,但是一些公司或者某些项目不适合放入github中,你希望能有一个完全 ...

  8. HOOK API 在多线程时应该注意的问题点

    在使用INLINE HOOK API实现对系统API的拦截时,正常情况下并没有太大问题,但一旦涉及到多线程,不管是修改IAT还是JMP,2种方法均会出现不可预料的问题,特别是在HOOK一些复杂的大型系 ...

  9. API HOOK

    API HOOK技术是一种用于改变API执行结果的技术,Microsoft 自身也在Windows操作系统里面使用了这个技术,如Windows兼容模式等. API HOOK 技术并不是计算机病毒专有技 ...

  10. API HOOK技术

    API HOOK技术是一种用于改变API执行结果的技术,Microsoft 自身也在Windows操作系统里面使用了这个技术,如Windows兼容模式等. API HOOK 技术并不是计算机病毒专有技 ...

随机推荐

  1. 使用ESP8266连接中文wifi

    使用XCOM串口调试助手调试ESP8266时,想要连接学校的wifi,通过AT+CWLAP可以显示出附近所有wifi的列表,可是XCOM以ascii码格式显示文本,所以中文就乱码了. 一开始我不知道这 ...

  2. Kubernetes--Pod存活性探测(设置HTTP探针)

    基于HTTP的探测(HTTPGetAction)向目标容器发起一个HTTP请求,根据其响应码进行结果判定,响应码形如2xx或者3xx时表示检测通过."sepc.containers.live ...

  3. C#封装FluentValidation

    FluentValidation是一个非常强大的用于构建强类型验证规则的 .NET 框架,帮程序员解决了繁琐的校验问题,用起来非常爽,但我还是遇到了一件非常不爽的事情,如下代码所示: public c ...

  4. (0303)怎么在sequence中调用agent中的函数以及如何快速实验你的想法?

    https://mp.weixin.qq.com/s/9hDz9-nur5szBib18_yPnA

  5. node 基础

    使用 vscore 写 node 的配置文件 { "version": "0.2.0", "configurations": [ { &qu ...

  6. VSCode+EIDE开发CH32V系列RISC-V MCU

    VSCode+EIDE开发CH32V系列RISC-V MCU 1. VS Code Visual Studion Code (VS Code),是一款由微软开发且跨平台的免费源代码编辑器.该软件支持语 ...

  7. 雪花算法生成ID重复问题

    转载自: https://www.jianshu.com/p/71286e89e0c5

  8. vagrant搭建centos7

    准备工作 下载安装vagrant https://releases.hashicorp.com/vagrant/2.3.4/vagrant_2.3.4_windows_amd64.msi 选择自己需要 ...

  9. Cesium开发三维地图入门

    需求:要求将GLTF三维模型放到地图上展示,并且添加各种图标和线进行标注. 用CesiumJS地图库实现代码如下: 引入CesiumJS库 1.直接clone源码包,在index.html中引入,如下 ...

  10. 在集群上运行Spark应用

    初识Spark真的存在很多疑问:Spark需要部署在集群里的每个节点上吗?Spark怎么有这么多依赖,这些依赖分别又有什么用?官网里边demo是用sbt构建的,难道还有再学一下sbt吗? --就是这么 ...