Skip to content

Commit 569db42

Browse files
committed
Update examples
1 parent 421ea8e commit 569db42

File tree

1 file changed

+85
-4
lines changed

1 file changed

+85
-4
lines changed

README.md

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $ npm install mota --save
2323

2424
# Usage
2525

26-
Example 1: Hello Mota
26+
**Example 1**: Hello Mota
2727

2828
```jsx
2929
import { observable, observer } from "mota";
@@ -43,7 +43,7 @@ const View2 = observer(() {
4343
});
4444
```
4545

46-
Example 2: Using useObservable
46+
**Example 2**: Using useObservable
4747

4848
```jsx
4949
import { observer, useObservable } from "mota";
@@ -57,7 +57,7 @@ const View = observer(() {
5757
});
5858
```
5959

60-
Example 3: Using useComputed
60+
**Example 3**: Using useComputed
6161

6262
```jsx
6363
import { observer, observable, useComputed } from "mota";
@@ -75,7 +75,7 @@ const View = observer(() {
7575
```
7676

7777

78-
Example 4: Using useAutoRun
78+
**Example 4**: Using useAutoRun
7979

8080
```jsx
8181
import { observer, observable, useAutoRun } from "mota";
@@ -90,4 +90,85 @@ const View = observer(() {
9090
});
9191
return <div>{model.count}</div>
9292
});
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+
}
93174
```

0 commit comments

Comments
 (0)