1- import { walk } from "../src.backup/utils/observer" ;
2- import Watcher from "../src.backup/utils/watcher" ;
1+ import ReactV from "../src/ReactV" ;
32import React from "react" ;
43import ReactDOM from "react-dom"
5- // import { mapGetters } from "../src/index.js";
6- // import React from "react";
7- // import ReactDOM from "react-dom";
8- // import store from "./store";
9- // import reactx from "../src/index";
10- // const { Provider } = reactx;
114
12- // class App extends React.Component {
13- // // getters = mapGetters(["allDocuments"])
14- // componentDidMount(){
15- // setTimeout(() => {
16- // console.log("test", store.state)
17- // store.state.documents.documents = ["hi"]
18- // }, 1000)
19- // }
20- // render(){
21- // return (
22- // <Provider store={store}>
23- // <div className = "app">
24- // <h2>App</h2>
25- // </div>
26- // </Provider>
27- // )
28- // }
29- // }
30- 31- // ReactDOM.render(<App />, document.getElementById("main"));
32- 33- class ReactxComponent extends React . Component {
34- state = { }
35- componentDidMount ( ) {
36- walk ( this . state , ( o , key , val ) => {
37- this . setState ( o )
38- } ) ;
39- this . mounted ( ) ;
40- }
41- mounted ( ) { }
42- }
43- 44- class App extends ReactxComponent {
5+ class App extends ReactV . Component {
456 state = {
46- firstName : "Prev" ,
47- lastName : "Wong"
7+ illuminate : 2 ,
8+ times : 1 ,
9+ status : "ready"
10+ }
11+ mounted ( ) {
12+ setTimeout ( ( ) => {
13+ this . status = "mounted!" ;
14+ } , 1000 ) ;
15+ }
16+ watch = {
17+ status ( val , old ) {
18+ console . log ( "status updated...." , val , old ) ;
19+ } ,
20+ illuminate ( val , old ) {
21+ if ( val === 3 ) {
22+ this . status = "troix" ;
23+ }
24+ } ,
25+ times ( ) {
26+ console . log ( "times updated..." )
27+ }
4828 }
49- change ( ) {
50- this . state . firstName = "john"
29+ methods = {
30+ change ( ) {
31+ this . times = this . times + 1 ;
32+ this . illuminate = this . illuminate + 1 ;
33+ }
34+ }
35+ computed = {
36+ calc ( ) {
37+ return this . illuminate * this . times ;
38+ }
5139 }
5240 render ( ) {
53- const { firstName , lastName } = this . state ;
41+ const { status , illuminate , times } = this ;
5442 return (
5543 < div >
56- < h3 > < span > { firstName } </ span > lolo</ h3 >
57- < a onClick = { ( ) => this . change ( ) } > Click me</ a >
44+ < h3 > { status } </ h3 >
45+ < p > { illuminate } + { times } </ p >
46+ < a onClick = { ( ) => this . change ( ) } > Click</ a >
5847 </ div >
5948 )
6049 }
6150}
62- ReactDOM . render ( < App /> , document . getElementById ( "main" ) ) ;
63- 64- // const data = {
65- // firstName: "hello",
66- // lastName: "world"
6751
68- // }
69- 70- // walk(data);
71- 72- // const watcher = new Watcher(() => `Hi! My name is ${data.firstName} ${data.lastName}`, (val) => console.log(val));
73- // setTimeout(() => {
74- // data.lastName = "hl"
75- // }, 1000)
52+ ReactDOM . render ( < App /> , document . getElementById ( "main" ) ) ;
0 commit comments