Skip to content

Commit e6b6e37

Browse files
author
victorsun
committed
upd
1 parent b80d3ab commit e6b6e37

File tree

25 files changed

+1110
-121
lines changed

25 files changed

+1110
-121
lines changed

‎12-前端框架/03-React/react18/18-mobx/01-start/App.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
}

‎12-前端框架/03-React/react18/18-mobx/01-start/Tab.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
import store from "./store";
3+
4+
export default class Tab extends Component {
5+
6+
hide() {
7+
store.isTabbarShow = false;
8+
}
9+
10+
render() {
11+
return (
12+
<div>
13+
TabBar <button onClick={this.hide}>hide</button>
14+
</div>
15+
)
16+
}
17+
}

‎12-前端框架/03-React/react18/18-mobx/01-start/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import App from './App';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('root'),
9+
)

‎12-前端框架/03-React/react18/18-mobx/01-start/store.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {observable} from 'mobx';
2+
3+
const store = observable({
4+
isTabbarShow: true,
5+
list: [],
6+
});
7+
8+
export default store;

‎12-前端框架/03-React/react18/18-mobx/02-action/.babelrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env"
4+
],
5+
"plugins": [
6+
[
7+
"@babel/plugin-proposal-decorators",
8+
{
9+
"legacy": true
10+
}
11+
]
12+
]
13+
}

‎12-前端框架/03-React/react18/18-mobx/02-action/README.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# 装饰器环境配置
2+
3+
## 1. 配置vscode
4+
5+
...
6+
7+
## 2. 配置babel
8+
9+
```shell
10+
$ npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-env
11+
```
12+
13+
创建 .babelrc
14+
15+
```js
16+
{
17+
"presets": [
18+
"@babel/preset-env"
19+
],
20+
"plugins": [
21+
[
22+
"@babel/plugin-proposal-decorators",
23+
{
24+
"legacy": true
25+
}
26+
]
27+
]
28+
}
29+
```
30+
31+
## 3. 配置脚本
32+
33+
```shell
34+
$ npm i customize-cra react-app-rewired
35+
```
36+
37+
`config-overrides.js`
38+
39+
```js
40+
const path = require('path');
41+
const { override, addDecoratorsLegacy } = require('customize-cra');
42+
43+
function resolve(dir) {
44+
return path.join(__dirname, dir);
45+
}
46+
47+
const customize = () => (config, env) => {
48+
config.resolve.alias['@'] = resolve('src')
49+
if (env === 'production') {
50+
config.externals = {
51+
'react': 'React',
52+
'react-dom': 'ReactDOM',
53+
}
54+
}
55+
return config
56+
};
57+
58+
module.exports = override (addDecoratorsLegacy(), customize ())
59+
```
60+
61+
`package.json`
62+
63+
```
64+
"scripts": {
65+
"start": "react-app-rewired start",
66+
"build": "react-app-rewired build",
67+
"test": "react-app-rewired test",
68+
"eject": "react-app-rewired eject"
69+
},
70+
```
71+
72+
## 4. 函数式组件 & 取消订阅
73+
74+
存在销毁又创建的组件需要注意取消订阅
75+
76+
见 Fun.js

‎12-前端框架/03-React/react18/18-mobx/02-action/config-overrides.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const path = require('path');
2+
const { override, addDecoratorsLegacy } = require('customize-cra');
3+
4+
function resolve(dir) {
5+
return path.join(__dirname, dir);
6+
}
7+
8+
const customize = () => (config, env) => {
9+
config.resolve.alias['@'] = resolve('src')
10+
if (env === 'production') {
11+
config.externals = {
12+
'react': 'React',
13+
'react-dom': 'ReactDOM',
14+
}
15+
}
16+
return config
17+
};
18+
19+
module.exports = override (addDecoratorsLegacy(), customize ())

‎12-前端框架/03-React/react18/18-mobx/02-action/package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "04_Learn_Log",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"start": "react-app-rewired start",
8+
"build": "react-app-rewired build",
9+
"test": "react-app-rewired test",
10+
"eject": "react-app-rewired eject"
11+
},
12+
"dependencies": {
13+
"@babel/core": "^7.21.8",
14+
"@babel/plugin-proposal-decorators": "^7.21.0",
15+
"@babel/preset-env": "^7.21.5",
16+
"@reduxjs/toolkit": "^1.9.3",
17+
"customize-cra": "^1.0.0",
18+
"mobx": "^5.15.7",
19+
"react": "^18.0.0",
20+
"react-app-rewired": "^2.2.1",
21+
"react-dom": "^18.0.0",
22+
"react-redux": "^8.0.5",
23+
"react-scripts": "^5.0.1",
24+
"redux": "^4.2.1"
25+
},
26+
"eslintConfig": {
27+
"extends": [
28+
"react-app"
29+
]
30+
},
31+
"browserslist": {
32+
"production": [
33+
">0.2%",
34+
"not dead",
35+
"not op_mini all"
36+
],
37+
"development": [
38+
"last 1 chrome version",
39+
"last 1 firefox version",
40+
"last 1 safari version"
41+
]
42+
}
43+
}

‎12-前端框架/03-React/react18/18-mobx/02-action/public/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>react</title>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
</body>
10+
</html>

‎12-前端框架/03-React/react18/18-mobx/02-action/src/App.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react';
2+
import { autorun } from 'mobx';
3+
import store from './store';
4+
import Tab from './Tab';
5+
6+
export default class App extends Component {
7+
8+
state = {
9+
isShow: false,
10+
}
11+
12+
componentDidMount() {
13+
autorun(() => {
14+
this.setState({
15+
isShow: store.isTabbarShow,
16+
})
17+
})
18+
}
19+
20+
render() {
21+
return (
22+
<div>
23+
{this.state.isShow && <Tab />}
24+
</div>
25+
)
26+
}
27+
}

‎12-前端框架/03-React/react18/18-mobx/02-action/src/Fun.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { useState, useEffect } from 'react';
2+
3+
import store from "./store";
4+
import { autorun } from 'mobx';
5+
6+
export default function Fun(Props) {
7+
8+
const [list, setList] = useState([])
9+
10+
useEffect(() => {
11+
12+
if (store.list.length === 0) {
13+
store.getList();
14+
}
15+
16+
var unsubscribe = autorun(() => {
17+
console.log(store.list)
18+
setList(store.list)
19+
})
20+
21+
return () => {
22+
// 取消订阅
23+
unsubscribe()
24+
}
25+
}, [])
26+
27+
return (
28+
<div>
29+
{
30+
list.map(item => <div>item</div>)
31+
}
32+
</div>
33+
)
34+
}

‎12-前端框架/03-React/react18/18-mobx/02-action/src/Tab.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component } from 'react';
2+
import store from "./store";
3+
4+
export default class Tab extends Component {
5+
6+
hide() {
7+
// store.isTabbarShow = false;
8+
// 使用 mobx action
9+
store.changeHide();
10+
}
11+
12+
render() {
13+
return (
14+
<div>
15+
TabBar <button onClick={this.hide}>hide</button>
16+
</div>
17+
)
18+
}
19+
}

‎12-前端框架/03-React/react18/18-mobx/02-action/src/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import App from './App';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('root'),
9+
)

0 commit comments

Comments
 (0)