MobX 在 hook 中的使用

关于 mobX 在 react 16.8.0 以上的用法
以下例子均取自官网文档

一般用法:

import { observer, useLocalStore } from 'mobx-react';
const Hooks = observer(() => {
const todo = useLocalStore(() =>
({
title: 'Click to toggle',
done: false,
toggle() {
todo.done = !todo.done
},
get emoji() {
return todo.done ? '😜' : '🏃'
},
}));
return <div onClick={todo.toggle}>
<h3>{todo.title} {todo.emoji}</h3>
</div>
})

可以看到原来的修饰符@observer,
现在是使用 HOC 来进行扩展的;

还有另外的 2 种修饰方法:

1:

import { useLocalStore, useObserver } from 'mobx-react';
function Person() {
const person = useLocalStore(() => ({ name: 'John' }))
return useObserver(() => (
<div>
{person.name}
<button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
</div>
))
}

使用 useObserver(()=>JSX.Element) 方法取代 observer(()=>JSX.Element)

2:

import { Observer, useLocalStore } from 'mobx-react';
function ObservePerson() {
const person = useLocalStore(() => ({ name: 'John' }))
return (
<div>
{person.name} <i>I will never change my name</i>
<div>
<Observer>{() => <div>{person.name}</div>}</Observer>
<button onClick={() => (person.name = 'Mike')}>
I want to be Mike
</button>
</div>
</div>
)
}

使用部分渲染, 只有被 <Observer></Observer> 包裹的才能监听到对应值的改变

优化,分离,传值

import React, { FC } from 'react';
import { observer, useLocalStore } from 'mobx-react';
function initialFn(source) {
return ({
count: 2,
get multiplied() {
return source.multiplier * this.count
},
inc() {
this.count += 1
},
});
}
const Counter: FC<{ multiplier: number }> = observer(props => {
const store = useLocalStore(
initialFn,
Object.assign({ a: 1 }, props),// 可以传任意值
);
return (
<div>
<button id="inc" onClick={store.inc}>
{`Count: ${store.count}`}
</button>
<span>{store.multiplied}</span>
</div>
)
})

这种分离的方法,基本已经耦合性已经很低了

2021.3.11 更新

之前 mobx 官方对于 api 又进行了修改,本文也做对应的修改

重要修改: useLocalStore 将要废弃 !!
使用 useLocalObservable 替代, 而且他们的使用方案也不同:

import { useLocalObservable, Observer } from "mobx-react-lite"
const Todo = () => {
const todo = useLocalObservable(() => ({
title: "Test",
done: true,
toggle() {
this.done = !this.done
}
}))
return (
<Observer>
{() => (
<h1 onClick={todo.toggle}>
{todo.title} {todo.done ? "[DONE]" : "[TODO]"}
</h1>
)}
</Observer>
)
}

可直接作为局部或者全局的变量存储

const user = mobx.observable({
name: "Noa"
})
const Todo = () => {
return (
<Observer>
{() => (
<h1>
{user.name}
</h1>
)}
</Observer>
)
}
posted @   Grewer  阅读(6657)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示