前言 自己利用业余时间，基于 React、Ant、Webpack、Mobx、React-Router 写了一个后台管理模板，接下来会出三部曲系列，分为前端、后端、运维到发布，从零搭建 React 后台管理模板，目前已在公司内部搭建了几套项目，并都已上线，希望这个系列，帮助自己梳理各技术最新知识点，同时也希望对看到的人有所帮助。 项目效果： 登录页： 404 页： 列表页： GitHub 源码地址 Tristana 在线预览地址 Tristana 技术栈 React Ant React-Router Mobx Webpack ES6 Babel Axios Eslint Stylelint 项目结构 │ .babelrc // babelrc配置 │ .eslintrc.json // eslint配置 │

前言 最近一直在用 MobX 开发中小型项目，开发起来真的，真的很爽，响应式更新，性能快，样板代码减少(相对 Redux)。所以，想趁 2019 年结束前把 MobX 源码研究一遍。 Tips 由于 MobX 的源码很大，因此只会把个人认为比较重要的部分截取说明 阅读的 MobX 源码版本@5.15.0 由于本人对 TypeScript 经验尚浅，所以我会将其编译成 JavaScript 阅读 下面会用 mobx-source 简称代替 Mobx 如何调试源码 $ git clone https://github.com/mobxjs/mobx.git $ cd mobx $ cnpm i 查看 package.json，发现执行脚本有quick-build 和 small-build，我选择的是small-build，cnpm run small-build 然后在根目录下会生成

代码如下 import { action, observable } from 'mobx'; export default class BasicStore { @observable isLoading = observable.map({ }); @action changeLoadingStatus (loadingType, type) { this.isLoading.set(loadingType, type); } } // 初始化loading export function initLoading(target, key, descriptor) { const oldValue = descriptor.value; descriptor.value = async function(...ar

Auto Close Tag 自动添加 HTML/XML 关闭标记，与 Visual Studio IDE 或 Sublime 文本相同 键入开始标签的结束括号后，将自动插入结束标签。 Auto Rename Tag 自动重命名配对的 HTML/XML 标记 Beautify 为 Visual Studio 代码美化代码 选中需要美化的代码，右键 Format Document GitLens 增强 Visual Studio 代码中内置的 Git 功能-通过 Git 责怪注释和代码镜头一目了然地可视化代码作者，无缝导航和浏览 Git 存储库，通过强大的比较命令获得有价值的见解，等等 JavaScript (ES6) code snippets ES6 语法中 JavaScript 的代码段 Path Autocomplete 提供 Visual Studio 代码的路径完成。 P

前言 在过去的项目中一直用的都是 Redux，觉得挺不错的，按照官方推荐的一些写法，再加上团队风格，打造了一套关于 Redux 的架构，但是，现在觉得写 Action、Reducer 太繁琐，随着业务不断的增量，相应的文件和代码也会不断的增加，而且对新人来说不是非常友好(理解 Redux 比较困难)，听说一方诸侯 MobX 非常不错，所以在尝试使用了，目前项目中两套架构都是并存，写下自己的一些感想。 都解决什么问题？ 1、组件之间复用状态非常困难 React 本身没有提供将可复用性状态“附加”到组件的途径（例如，把组件连接到 Store）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 Props 和 HOC。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。写下这片博客的时候，React 已提供 Hook，但是本人觉得这都是些 hac