mobx react 状态管理，action 后更新了数据，但是页面没有渲染的问题

mobx @obsevable XXX 数据 已修改，但是页面没有即时渲染。

可以肯定 @action 的代码是没错的，在@action 里面打印也是可以的，点击按钮，@observable xxx的值也是会变的，就是没有触发 re-render 即时渲染，找了好多文档，Github 的 issue 也翻遍了，最后解决办法很无语。

先上错误代码

import { observable, action } from "mobx";

export default class HomeStore {
	@observable num ;// 注册变量，使其成为可检测的

	constructor() {
		this.num = 0; // 初始化变量，可以定义默认值
	}

	@action  // 方法推荐用箭头函数的形式
	plus = () => {
		this.num += 1;
		console.log(this)
	};

	@action
	minus = () => {
		this.num -= 1;
	};
}

• 页面的代码这里就补贴了，简单来说就是页面个<Text>{HomeStore.num}</Text>, 然后一直点击按钮触发 @action 事件
• console.log 可以再浏览器调试看到确实 num +1 了，但是页面还是 0 ，没有变化

• 找了好久，最后发现可能 constructor 的问题，看了好多别人的store 发现，有些人有 constructor 给初始值，有些没有，都能运行，然后我就试试去掉 constructor 初始化初始值 直接在 @observable num = 0，然后就成功了。

成功代码

import { observable, action } from "mobx";

export default class HomeStore {
	@observable num = 0 ;// 注册变量，使其成为可检测的

	@action  // 方法推荐用箭头函数的形式
	plus = () => {
		this.num += 1;
		console.log(this)
	};

	@action
	minus = () => {
		this.num -= 1;
	};
}

成功结果如下，但是这里注意！！！打印的 this 不一样！！！

• 多了一个 Symbol！！

  

我们再回过头来看看刚才 用 constructor 给初始值后的 this 指向

两者差距显而易见，用 constructor 后 this 指向变成了本身的一组件，没有mobx 相关的绑定属性和功能，可以说 仅仅是一个普通的react组件。而用 @observable num = 0 后，num 才有了 mobx 的双向数据绑定功能，更改这个数据才能做到即时刷新！！

• 具体原理本人知识浅薄还不太了解清楚，有哪位大佬知道的希望能在评论区留言 AMD yes！