mobx学习

1、create-react-app

想写个mobx的小demo

用create-react-app先搭建一个小应用

文档： https://www.html.cn/create-react-app/docs/getting-started/

按照入门引导，执行下面这个命令就可以新建一个react小项目了

npx create-react-app my-app
cd my-app
npm start

这是初始目录，比较常见的。

serviceWorker顺便提一下，控制页面缓存的，离线可访问。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

webpack配置文件被隐藏了

要定制自己的配置执行npm  run eject, 该过程不可逆。会生成几个webpack基本配置文件，webpack打包配置练习后面再补充。

scripts
├── build.js
├── start.js
├── test.js

2、写个mobx的小demo

安装几个依赖

npm install mobx react-mobx

npm install antd UI组件 

npm install mobx-react-devtools 调试工具

npm install babel-plugin-transform-decorators-legacy 修饰符插件

src下建一个store文件夹，新建demoStore.tsx文件

import { observable, action, computed } from "mobx";
export default class TodoList {
  @observable todos = 1;
  @observable arr = [{name: 'name'}];
  @action add(){
    console.log('add', this.todos);
    this.todos++;
  }
  @action reduce(){
    console.log('add', this.todos);
    this.todos--;
  }
  @action push(){
    console.log('push',this.arr);
    this.arr.push({
      name: 'name',
    })
  }
}

在page-demo使用在store中定义的变量

import React from "react";
import { observer, inject } from "mobx-react";
import { Button } from "antd";

@inject("store")
@observer
export default class PageDemo extends React.Component<any, any> {
	render() {
		const { store } = this.props;
		const { todos, arr } = store;
		return (
			<div>
				<h1>PageDemo</h1>
				<div>{this.props.store.todos}</div>
				<Button
					onClick={() => {
						store.add();
					}}
				>
					增加
				</Button>
				<Button
					onClick={() => {
						store.reduce();
					}}
				>
					减少
				</Button>
				{arr?.map((item:any) => {
					return <div key={item.name}>{item.name}</div>;
				})}
                <Button
					onClick={() => {
						store.push();
					}}
				>
					push
				</Button>
			</div>
		);
	}
}

但是现在遇到一个问题，在demo页面可以取到store中的变量值，但是store更新了，页面不会重新渲染，找了个别人的工程把我的代码考过去是没有问题的，可以进行更新，猜想是环境的问题。捣鼓了一天没啥进展，周末再试试，发现是包的版本安装得不对，由"mobx": "6.0.1","mobx-react": "7.0.0"换成"mobx": "3.6.2","mobx-react": "4.4.3",这两个版本就可以更新了。哭，果然遇到问题得换下思路换下脑袋，放一放再来看问题，真的不是代码的原因。一定要注意找到对应的版本才行能够运行，但是表现不对，为啥一点提示都没有。那么现在的问题就是，如何找到匹配的版本。其实官方代码库里有，然后我的npm版本是5.6.0，对比看了下也难怪会出问题。