@@ -23,7 +23,7 @@ $ npm install mota --save
23
23
24
24
# Usage
25
25
26
- Example 1: Hello Mota
26
+ ** Example 1** : Hello Mota
27
27
28
28
``` jsx
29
29
import { observable , observer } from " mota" ;
@@ -43,7 +43,7 @@ const View2 = observer(() {
43
43
});
44
44
```
45
45
46
- Example 2: Using useObservable
46
+ ** Example 2** : Using useObservable
47
47
48
48
``` jsx
49
49
import { observer , useObservable } from " mota" ;
@@ -57,7 +57,7 @@ const View = observer(() {
57
57
});
58
58
```
59
59
60
- Example 3: Using useComputed
60
+ ** Example 3** : Using useComputed
61
61
62
62
``` jsx
63
63
import { observer , observable , useComputed } from " mota" ;
@@ -75,7 +75,7 @@ const View = observer(() {
75
75
```
76
76
77
77
78
- Example 4: Using useAutoRun
78
+ ** Example 4** : Using useAutoRun
79
79
80
80
``` jsx
81
81
import { observer , observable , useAutoRun } from " mota" ;
@@ -90,4 +90,85 @@ const View = observer(() {
90
90
});
91
91
return < div> {model .count }< / div>
92
92
});
93
+ ```
94
+
95
+ ** Example 5** : Using useWatch
96
+
97
+ ``` jsx
98
+ import { observer , observable , useWatch } from " mota" ;
99
+
100
+ const model = observable ({ count: 0 });
101
+
102
+ const View = observer (() {
103
+ // When the result of the evaluation function changes,
104
+ // the processing function is re executed.
105
+ useWatch (()=> model .count % 10 , (oldValue , newValue )=> {
106
+ console .log (` old: ${ oldValue} , new: ${ newValue} ` );
107
+ });
108
+ return < div> {model .count }< / div>
109
+ });
110
+ ```
111
+
112
+ ** Example 6** : Using in class components
113
+
114
+ ``` jsx
115
+ import { observer , observable , autorun , watch } from " mota" ;
116
+
117
+ const model = observable ({ count: 0 });
118
+
119
+ class View extends React .Component {
120
+ add = ()=> model .count ++ ;
121
+
122
+ componentDidMount (){
123
+ this .destroyAutoRun = autorun (()=> {
124
+ console .log (' autorun count: ' , model .count );
125
+ });
126
+ this .destroyWatch = watch (()=> model .count % 10 , ()=> {
127
+ console .log (' autorun count: ' , model .count );
128
+ });
129
+ }
130
+
131
+ componentWillUnmount (){
132
+ this .destroyAutoRun ();
133
+ this .destroyWatch ();
134
+ }
135
+
136
+ @computed get message (){
137
+ return ` count: ${ model .count } ` ;
138
+ }
139
+
140
+ render () {
141
+ return < div>
142
+ < span> {this .message }< / span>
143
+ < button onClick= {this .add }> click< button>
144
+ < / div>
145
+ }
146
+ }
147
+ ```
148
+
149
+ ** Example 7** : Using multiple instances in class components
150
+
151
+ ``` jsx
152
+ import { observer , observable , autorun , watch } from " mota" ;
153
+
154
+ @observable
155
+ class Model {
156
+ count = 0 ;
157
+ add () {
158
+ this .count ++ ;
159
+ }
160
+ @computed get message (){
161
+ return ` count: ${ model .count } ` ;
162
+ }
163
+ }
164
+
165
+ class View extends React .Component {
166
+ model = new Model ();
167
+ render () {
168
+ return < div>
169
+ < span> {this .model .message }< / span>
170
+ < button onClick= {()=> this .model .add ()}> click< button>
171
+ < / div>
172
+ }
173
+ }
93
174
```
0 commit comments