Mobx 项目源码初探（一）

Mobx 简介

MobX 是一个身经百战的库，它通过运用透明的函数式响应编程（Transparent Functional Reactive Programming，TFRP）使状态管理变得简单和可扩展。 用在 React 项目中，官方提供的mobx-react-lite，用在函数组件，主打轻量化；mobx-react，类组件和函数组件都支持，在 React 17 推出 Hooks 之后，开始的项目，如果使用Mobx，一般都会采用 函数组件 + mobx-react-lite 这个选择。

Mobx 技术架构

mobx
├─.editorconfig
├─.eslintrc.js
├─.prettierignore
├─.prettierrc
├─jest.base.config.js
├─jest.config.js
├─lerna.json
├─package.json
├─tsconfig.json
├─tsconfig.test.json
├─yarn.lock
├─website
├─scripts
|    └build.js
├─packages
|    ├─mobx-undecorate
|    ├─mobx-react-lite
|    ├─mobx-react
|    ├─mobx
|    ├─eslint-plugin-mobx
├─docs

这是 Mobx 的主要目录，可以看得出来：

1. Mobx 是基于 Lerna 实现的 Monorepo，下面有 mobx-undecorate，mobx-react-lite，mobx-react，mobx，eslint-plugin-mobx，等 5 个 模块; 很多开源库的代码都是 Monorepo 这种架构，React 和 Vue 都是如此。这样共享工程配置，同时又快捷地共享模块代码，各个模块也可以独立进行升级，进行打包。
2. /docs 文件夹下放的是 Mobx 网站下的文章，然后在 /webside 下是基于 docusaurus，同同样也是 Meta 公司推出的，基于自家 React 的 SSG （静态站点生成器）。
3. 使用 Jest 进行单元测试，保证代码的健壮性，稳定性。
4. 使用 ESLint 提示代码格式错误，Prettier 来进行代码的格式化。
5. 使用 typescript 进行开发。
6. /scripts 下的 build.js 可以看出，使用TSDX这个包进行打包。

Mobx 基本原理

1. Mobx 中使用 Proxy 提供高性能的 observerable, 同时依赖于 Symbol、Map、Set 这三种复杂数据类型，也可以看出 Proxy 并不是必须的，官方文档给出的解释是一些运行环境是不支持 Proxy 的，例如 React Native。也是给了降级方案，使用 defineProperty，来实现 observerable。

// /mobx/src/mobx.ts
["Symbol", "Map", "Set"].forEach(m => {
	let g = getGlobal()
	if (typeof g[m] === "undefined") {
		die(`MobX requires global '${m}' to be available or polyfilled`)
	}
})

如果宿主环境不支持 Proxy，需要在代码中进行配置，
如果不配置的话就是 'always'，当然也就是意味着宿主环境是一定支持 Proxy 的，大多数浏览器都是支持的，Vue3 中的响应式也是基于此。
如果确定宿主环境一定是不支持的，那就要使用 'never',这样可以保证响应式。
如果不太确定，或者多个环境的代码是同构的，那么 'ifavailable'，是最好的选择，可以根据是否支持 Proxy 来决定 useProxies。

import { configure } from "mobx";
// useProxies?: "always" | "never" | "ifavailable"
configure({ useProxies: "never" })

响应式原理

下周再来研究一下