# mobx-demo

**Repository Path**: gl-web/mobx-demo

## Basic Information

- **Project Name**: mobx-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### 环境搭建
1. 安装 `webpack babel` 支持
```
yarn add webpack webpack-cli @babel/preset-env @babel/core babel-loader @babel/plugin-proposal-class-properties
```
2. 配置 `webpack.config.js`
```
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: [
              '@babel/preset-env'
            ],
            plugins: [
              ["@babel/plugin-proposal-class-properties", { "loose": true }]
            ]
          }
        }
      }
    ]
  },
  devtool: 'inline-source-map'
};

module.exports = config;
```
3. 安装装饰器支持
```
yarn add @babel/plugin-proposal-decorators
```

4. 配置 `webpack.config.js`
```
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: [
              '@babel/preset-env',
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose": true }]
            ]
          }
        }
      }
    ]
  },
  devtool: 'inline-source-map'
};

module.exports = config;
```

5. 安装 `react react-dom prop-types` 支持
```
yarn add react react-dom prop-types
```

6. 配置 `webpack.config.js`
```
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: [
              '@babel/preset-env',
              '@babel/preset-react'
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose": true }]
            ]
          }
        }
      }
    ]
  },
  devtool: 'inline-source-map'
};

module.exports = config;
```

7. 安装 `mobx mobx-react`
```
yarn add mobx mobx-react
```

### Mobx 要点
1. 定义状态并使其可观察
`@observable`

示例
```
class Todo {
  id = Math.random();
  @observable title = '';
  @observable finished = false;

  constructor(title) {
    this.title = title;
  }
}

class Store {
  @observable todos = [];
}
```

2. 创建视图以响应状态的变化
`@observer`
示例
```
const store = new Store();

@observer
class TodoList extends Component {
  static propTypes = {
    store: PropTypes.shape({
      createTodo: PropTypes.func,
      todos: ObservablePropTypes.observableArrayOf(ObservablePropTypes.observableObject).isRequired
    }).isRequired
  }

  render() {trace();
    const { store } = this.props;
    const { todos } = store;
    // console.log('TodoList', this.props);
    return (
      <div className="todo-list">
        <TodoHeader store={store} />
        <TodoView todos={store.todos} />
        <TodoFooter store={store} />
      </div>
    );
  }
}
```

3. 更改状态
`@action`
示例
```
class Todo {
  id = Math.random();
  @observable title = '';
  @observable finished = false;

  constructor(title) {
    this.title = title;
  }

  @action.bound toggle() {
    this.finished = !this.finished;
  }
}

class Store {
  @observable todos = [];

  @action.bound createTodo(title) {
    // console.log('createTodo', title);
    this.todos.unshift(new Todo(title));
  }

  @action.bound removeTodo(todo) {
    this.todos.remove(todo);
  }

  @computed get left() {
    return this.todos.filter((todo => !todo.finished)).length;
  }
}
```

### 常用工具函数
`observe`

`toJS`

`trace`

`spy`

### 开发法则
+ 法则一: 尽可能晚地结构可观察数据
+ 法则二: 使用专用组件处理列表
+ 法则三: 细粒度拆分视图组件

### 参考
[https://www.webpackjs.com/guides/](https://www.webpackjs.com/guides/)
[https://www.webpackjs.com/loaders/babel-loader/#安装](https://www.webpackjs.com/loaders/babel-loader/#%E5%AE%89%E8%A3%85)
[https://www.babeljs.cn/docs/babel-plugin-proposal-class-properties](https://www.babeljs.cn/docs/babel-plugin-proposal-class-properties)
[https://www.babeljs.cn/docs/usage](https://www.babeljs.cn/docs/usage)
[https://www.babeljs.cn/docs/babel-plugin-proposal-decorators](https://www.babeljs.cn/docs/babel-plugin-proposal-decorators
[https://www.babeljs.cn/docs/babel-preset-react](https://www.babeljs.cn/docs/babel-preset-react))
[mobx入门基础教程](https://www.imooc.com/video/17463)
[mobx中文网](https://cn.mobx.js.org/intro/overview.html)