1
+ import React , { Component } from 'react' ;
2
+ import { observable , autorun } from 'mobx' ;
3
+ import store from './store' ;
4
+ import Tab from './Tab' ;
5
+
6
+ // npm i mobx@5
7
+
8
+ /**
9
+ * 观察普通类型数据
10
+ */
11
+ var observableNumber = observable . box ( 10 ) ;
12
+ var observableName = observable . box ( 'test' ) ;
13
+ // 监听,订阅者,用到的才会执行,而 subscribe 所有变化都会执行
14
+ autorun ( ( ) => {
15
+ console . log ( observableNumber . get ( ) ) ;
16
+ } ) ;
17
+ autorun ( ( ) => {
18
+ console . log ( observableName . get ( ) ) ;
19
+ } ) ;
20
+ setTimeout ( ( ) => { observableNumber . set ( 20 ) ; } , 1000 ) ;
21
+ setTimeout ( ( ) => { observableName . set ( 'dev' ) ; } , 2000 ) ;
22
+
23
+ /**
24
+ * 观察对象,通过map 或 不通过map
25
+ */
26
+ const myObj1 = observable . map ( {
27
+ name : 'user name1' ,
28
+ age : 11 ,
29
+ } ) ;
30
+
31
+ //////// 【推荐】 ///////
32
+ const myObj2 = observable ( {
33
+ name : 'user name2' ,
34
+ age : 22 ,
35
+ } ) ;
36
+ autorun ( ( ) => {
37
+ console . log ( '对象1的name属性改变了' , myObj1 . get ( 'name' ) ) ;
38
+ console . log ( '对象2的name属性改变了' , myObj2 . name ) ;
39
+ } ) ;
40
+ // 不建议直接修改,建议通过action操作
41
+ // 不会触发上面的autorun
42
+ setTimeout ( ( ) => { myObj1 . set ( 'age' , 12 ) ; } , 1000 ) ;
43
+ setTimeout ( ( ) => { myObj2 . age = 23 ; } , 1000 ) ;
44
+ // 触发上面的autorun
45
+ setTimeout ( ( ) => { myObj1 . set ( 'name' , 'new user name1' ) ; } , 2000 ) ;
46
+ setTimeout ( ( ) => { myObj2 . name = 'new user name2' ; } , 2000 ) ;
47
+
48
+ /**
49
+ * 观察数组
50
+ */
51
+ const list = observable ( [ 1 , 2 , 4 ] ) ;
52
+ autorun ( ( ) => {
53
+ console . log ( 'list改变了' , list . length ) ;
54
+ } ) ;
55
+ setTimeout ( ( ) => { list [ 2 ] = 3 ; } , 1000 ) ;
56
+
57
+
58
+ export default class App extends Component {
59
+
60
+ state = {
61
+ isShow : false ,
62
+ }
63
+
64
+ componentDidMount ( ) {
65
+ autorun ( ( ) => {
66
+ this . setState ( {
67
+ isShow : store . isTabbarShow ,
68
+ } )
69
+ } )
70
+ }
71
+
72
+ render ( ) {
73
+ return (
74
+ < div >
75
+ { this . state . isShow && < Tab /> }
76
+ </ div >
77
+ )
78
+ }
79
+ }
0 commit comments