mobx在react hooks中的应用方式
作者：Ctrl30xsx
这篇文章主要介绍了mobx在react hooks中的应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
mobx在react hooks的应用
hooks 实现inject功能
// utils/useStores.js
import React from 'react'
import { MobXProviderContext} from 'mobx-react';
import RootStore from '~/stores/index'
const useStores = (name) => React.useContext(MobXProviderContext)[name]
export default useStores局部的store
// store.js
import { observable, action } from 'mobx';
class Store {
@observable userInfo = { name: 'xsx' };
@observable count = 11;
@action
handleClick() {
this.count +=1;
}
}
export default Store;页面中使用
import React, { ReactElement } from 'react';
import Store from './store.ts';
import useStores from '~/utils/useStores';
import { useObserver, useObservable } from 'mobx-react-lite';
interface Props {
[props: string]: any;
}
export default function index(props: any): ReactElement {
// 手动传入字符串，选择要使用的内容 该处为全局store的引用，与之前的class下的@inject('userStore')同理
const globalStore = useStores('userStore');
// 添加观察者模式 该处为局部的store 与之前class下的 let myStore = new Store(); 同理
let myStore = useObservable(new Store());
return useObserver(() => (
<div>
{myStore.count}
====================
{store.count}
<button
onClick={() => {
myStore.handleClick();
globalStore .handleClick();
}}
>
add
</button>
</div>
));
}mobx与react hooks配合使用
import React from 'react';
import {useObserver, Observer， observer} from 'mobx-react';
import {appStore} from './appStore';
// 方法1：
function Methods1() {
return useObserver(() => (
<div onClick={() => {appStore.count = 1}}>{appStore.count}</div>
))
}
// 方法2(Observer一定要用函数)：
function Methods2 () {
return （
<Observer>
{() => <div onClick={() => {appStore.count = 1}}>{appStore.count}</div>}
</Observer>
）
}
// 方法3（推荐）：
export default observer(props => {
return <div onClick={() => {appStore.count = 1}}>{appStore.count}</div>
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。