2019.10.24

pingan8787 · pingan8787 · commit 47e5ac3b2bad · 2019-10-24T23:37:49.000+08:00
diff --git a/Cute-React/MobX-Learning/demo/index-react-demo.jsx b/Cute-React/MobX-Learning/demo/index-react-demo.jsx
@@ -0,0 +1,51 @@
+// cnpm i react react-dom prop-types mobx-react -S
+// cnpm i babel-preset-react -D
+
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import {observable, action} from 'mobx';
+import PropTypes from 'prop-types';
+import {observer, PropTypes as ObservablePropTypes} from 'mobx-react';
+
+
+class Store {
+    @observable cache = {queue : []}
+
+    @action.bound refresh(){
+        this.cache.queue.push(1)
+    }
+}
+
+const store = new Store()
+
+
+
+@observer
+class Bar extends Component {
+    static propTypes = {
+        queue: ObservablePropTypes.observableArray
+    }
+    render() {
+        const queue = this.props.queue;
+        return (
+             <span>{queue.length}</span>
+        );
+    }
+}
+
+class Foo extends Component {
+    static propTypes = {
+        queue: ObservablePropTypes.observableObject
+    }
+    render() {
+        const cache = this.props.cache
+        return (
+            <div>
+                <button onClick={this.props.refresh}>点击</button>
+                <Bar queue = {cache.queue}></Bar>
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<Foo cache={store.cache} refresh = {store.refresh}/>, document.querySelector('#root'))
diff --git a/Cute-React/MobX-Learning/demo/package.json b/Cute-React/MobX-Learning/demo/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "mobx1",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack -w"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "webpack": "^4.41.1",
+    "webpack-cli": "^3.3.9"
+  },
+  "dependencies": {
+    "mobx": "^5.14.0",
+    "mobx-react": "^6.1.4",
+    "prop-types": "^15.7.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2"
+  }
+}
diff --git a/Cute-React/MobX-Learning/demo/webpack.config.js b/Cute-React/MobX-Learning/demo/webpack.config.js
@@ -0,0 +1,26 @@
+const path = require('path')
+
+const config = {
+    mode: 'development',
+    entry: path.resolve(__dirname, 'src/index.jsx'),
+    output: {
+        path:  path.resolve(__dirname, 'dist'),
+        filename: 'main.js'
+    },
+    module: {
+        rules: [{
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['env', 'react'],
+                    plugins: ['transform-decorators-legacy', 'transform-class-properties']
+                }
+            }
+        }]
+    },
+    devtool: 'inline-source-map'
+}
+
+module.exports = config
