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> ) }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!