当前位置:网站首页>mobx 知识点集合案例(快速入门)
mobx 知识点集合案例(快速入门)
2022-07-07 02:06:00 【胖鹅68】
一、文章参考
二、知识点串联
2.1 使用注解方式串联
import React, {
Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';
import {
BrowserRouter } from 'react-router-dom';
import {
observable, action, autorun, computed, configure, runInAction, when, reaction } from 'mobx';
import {
observer } from 'mobx-react';
import store from './mobx/AppStore';
configure({
// 强制要求 修改 observable 的数据,一定要放到 action 中
enforceActions: 'observed',
});
// 1. 初始化 mobx 容器仓库
class MyStore {
@observable count = 0;
name = 'huangbiao';
@observable foo = 'bar';
@observable price = 10;
@action.bound increment() {
this.count++;
}
@computed get totalPrice() {
console.log('totalPrice 这里使用了缓存,不是展示多少次,就调用多少次');
return this.count * this.price;
}
// bound 表示上下文 this 为 实例对象,不能使用箭头函数
@action.bound change() {
console.log(this);
this.foo = 'hello';
this.foo = 'world';
this.count = 10;
}
@action.bound asyncChange () {
setTimeout(() => {
// this.count = 100
// 1. 定义 action 函数
// this.changeCount()
// 2. 直接调用action
// action('changeFoo', () => {
// this.count = 30
// })()
// 3. runInAction
runInAction(() => {
this.count = 40
})
}, 200)
}
@action.bound changeCount(value = 20) {
this.count = value
}
}
const mystore = new MyStore();
/** * auto 默认会执行一次 * 然后,当内部所依赖的 observable 数据发生改变的时候重新触发执行 */
autorun(() => {
console.log('autorun: ', mystore.name, mystore.count, mystore.foo);
});
/****************** 修改多次observable会引发多次执行 autorun 函数 ******************** // 如果连续调用两次 observable 的数据,则 autorun 也会调用两次,效率比较低 // mystore.foo = 'hello' // mystore.foo = 'world' // mystore.count = 10 // 1. 将多次修改的操作 放到一个 action 中 // mystore.change() // 2. runInAction 创建一个被立即调用的一次性 action。 // runInAction(() => { // mystore.foo = 'hello'; // mystore.foo = 'world'; // mystore.count = 10; // }) */
// const tempChnage = mystore.change
// 上下文已经不是 store对象了,因此需要使用 @action.bound 保证上下文
// tempChnage()
/****************** 异步触发会引发的问题 ******************** */
// mystore.asyncChange()
/****************** when ******************** // 当 count > 100 的时候,只执行一次自定义逻辑 when( () => { return mystore.count > 100 }, () => { console.log('when -> ', mystore.count) } ) mystore.changeCount(200) // when 满足条件只触发了一次 mystore.changeCount(300) */
/****************** 异步触发会引发的问题 ******************** */
reaction(
() => {
return mystore.count
},
(data, reaction) => {
console.log('reaction -> ', data)
// 手动停止当前 reaction 的监听
if (data > 3) {
reaction.dispose()
}
}
)
// 2. 在组件中使用 mobx 容器的状态
@observer
class App extends Component {
render() {
const {
store } = this.props;
return (
<>
<div>AppMobx</div>
<div>{
store.count}</div>
<div>
<button onClick={
store.increment}>increment</button>
</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
<div>总价:{
store.totalPrice}</div>
</>
);
}
}
// 3. 在组件中发起 action 修改容器的状态
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
{
/* <App/> */}
<App store={
mystore} />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
2.2 使用函数
import {
observable, autorun, action} from "mobx";
var person = observable({
// observable 属性:
name: "John",
age: 42,
showAge: false,
// 计算属性:
get labelText() {
return this.showAge ? `${
this.name} (age: ${
this.age})` : this.name;
},
// 动作:
setAge(age) {
console.log('setAge')
this.age = age;
}
}, {
setAge: action
});
// person 实际上是一个 proxy 对象
console.log('person', person)
// 对象属性没有暴露 'observe' 方法,
// 但不用担心, 'mobx.autorun' 功能更加强大
autorun(() => {
console.log(person.labelText)
});
person.name = "Dave";
// 输出: 'Dave'
person.showAge = true
person.setAge(21);
// 等等
边栏推荐
- Wechat applet hides the progress bar component of the video tag
- Jcmd of JVM command: multifunctional command line
- [opencv] morphological filtering (2): open operation, morphological gradient, top hat, black hat
- Oracle迁移中关于大容量表使用数据泵(expdp、impdp)导出导入容易出现的问题和注意事项
- Find duplicate email addresses
- C语言整理(待更新)
- How to use wechat cloud hosting or cloud functions for cloud development of unapp development applet
- Database notes 04
- 基于FPGA的VGA协议实现
- MySQL(十)
猜你喜欢
Rk3399 platform development series explanation (WiFi) 5.52. Introduction to WiFi framework composition
软件测试到了35岁,真的就干不动了吗?
"Parse" focalloss to solve the problem of data imbalance
可极大提升编程思想与能力的书有哪些?
直击2022ECDC萤石云开发者大会:携手千百行业加速智能升级
rt-thread 中对 hardfault 的处理
Jmeter自带函数不够用?不如自己动手开发一个
postgresql 数据库 timescaledb 函数time_bucket_gapfill()报错解决及更换 license
字符串常量与字符串对象分配内存时的区别
【GNN】图解GNN: A gentle introduction(含视频)
随机推荐
Qt多线程的多种方法之一 QThread
MySQL(十)
Crudini 配置文件编辑工具
「解析」FocalLoss 解决数据不平衡问题
地质学类比较有名的外文期刊有哪些?
JWT 认证
Jcmd of JVM command: multifunctional command line
When we talk about immutable infrastructure, what are we talking about
Ha Qu projection dark horse posture, only half a year to break through the 1000 yuan projector market!
Several key steps of software testing, you need to know
安装VMmare时候提示hyper-v / device defender 侧通道安全性
Laravel uses Tencent cloud cos5 full tutorial
693. Travel sequencing
Experience sharing of contribution of "management world"
对称的二叉树【树的遍历】
Redis (I) -- getting to know redis for the first time
计算模型 FPS
JVM in-depth
Calculation model FPS
面试中有哪些经典的数据库问题?