目录
- 引言
- 一般用法
- 修饰方法
- 优化,分离,传值
- 2021.3.11 更新
引言
关于 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 来进行扩展的;
修饰方法
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>
)
}
以上就是react16.8.0以上MobX在hook中的使用方法详解的详细内容,更多关于react MobX hook使用方法的资料请关注悠久资源网其它相关文章!
您可能感兴趣的文章:
- React使用Mobx6.x共享状态问题
- react 中 mobx的使用案例详解
- ReactMobx状态管理工具的使用
- React中使用Mobx的方法
- mobx在reacthooks中的应用方式