介绍
笔者在浏览Github的React专题时偶然发现了一个类似于dva.js的React状态和数据流管理框架——react-coat，其本身不对React进行任何的封装和改进，使用Class的方式组织Model，支持继承，但不强制使用，React生态圈开放、自由、繁荣，带来的问题就是复杂。结合作者的介绍，react-coat放弃了某些灵活性，约定替代配置，固化某些最佳实践，从而给予开发者最简洁的糖衣外套！
本文初衷
由于笔者目前处于一个技术的积累阶段，介绍一个框架或者一个技术并不是为了让大家真的去使用，而是从诸多技术中寻找灵感，不断地去学习才能找到自己的突破点，特别是在自身已经比较的熟练或者熟悉某一个方向，但是却又迷茫的时候，这时候多看看别人的东西或许能够成为自身突破的一个关键，网络上也是对各种技术框架褒贬不一，而作为一个学习者，那么本身 不必在乎技术的使用，更多的可能是其传达的思想，以便于达到举一反三的效果，特别是对技术感兴趣的同行们，自身实力过硬才是硬道理！
react-coat
学习一个框架或者技术首先是需要了解他的特点（以下是Github中文README中的介绍）：
- 集成 react、redux、react-router、history 等相关框架
- 仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏性
- 结构化前端工程、业务模块化，支持按需加载
- 使用 typescript 严格类型，更好的静态检查与智能提示
- 开源微框架，源码不到千行，几乎不用学习即可上手
- 去除 redux-saga，改用原生的 async 和 await 来组织和管理 effect
- 同时支持 SPA(单页应用)和 SSR(服务器渲染)、完整的支持客户端与服务端同构
从其特点可以看出，首先它是开源的，然后它还是小巧的，这样就给我们学习带来了方便，不到千行的代码量，我相信比起那些个重量级的框架来说，无论是学习还是使用都应该是相对容易的。react-coat的理念与dvaJS略同，Github上也提供了深度的对比，感兴趣的小伙伴可以参考原文！
PS：Github关键字： react-coat
代码示例
// 仅需一个类，搞定 action、dispatch、reducer、effect、loading
class ModuleHandlers extends BaseModuleHandlers {
@reducer
protected putCurUser(curUser: CurUser): State {
return {...this.state, curUser};
}
@reducer
public putShowLoginPop(showLoginPop: boolean): State {
return {...this.state, showLoginPop};
}
@effect("login") // 使用自定义loading状态
public async login(payload: {username: string; password: string}) {
const loginResult = await sessionService.api.login(payload);
if (!loginResult.error) {
// this.updateState()是this.dispatch(this.actions.updateState(...))的快捷
this.updateState({curUser: loginResult.data});
Toast.success("欢迎您回来！");
} else {
Toast.fail(loginResult.error.message);
}
}
// uncatched错误会触发@@framework/ERROR，监听并发送给后台
@effect(null) // 不需要loading，设置为null
protected async ["@@framework/ERROR"](error: CustomError) {
if (error.code === "401") {
// dispatch Action：putShowLoginPop
this.dispatch(this.actions.putShowLoginPop(true));
} else if (error.code === "301" || error.code === "302") {
// dispatch Action：路由跳转
this.dispatch(this.routerActions.replace(error.detail));
} else {
Toast.fail(error.message);
await settingsService.api.reportError(error);
}
}
// 监听自已的INIT Action，做一些异步数据请求
@effect()
protected async ["app/INIT"]() {
const [projectConfig, curUser] = await Promise.all([
settingsService.api.getSettings(),
sessionService.api.getCurUser()
]);
// this.updateState()是this.dispatch(this.actions.updateState(...))的快捷
this.updateState({
projectConfig,
curUser,
});
}
}
安装
npm install react-coat
或者省心的做法，将包含所有依赖项
npm install react-coat-pkg
兼容性
各主流浏览器、IE9 或 IE9 以上，本框架依赖于完整版"Promise"，低版本浏览器请自行安装 polyfill，推荐安装@babel/polyfill，该库可模拟 unhandledrejection error，当你需要在客户端捕捉错误并上报时需要。
快速上手
本框架上手简单
- 8 个新概念：
Effect、ActionHandler、Module、ModuleState、RootState、Model、View、Component
- 4 步创建：
exportModel(), exportView(), exportModule(), createApp()
- 3 个 Demo（Github上提供了完整的DEMO），循序渐进:
SPA(单页) Helloworld
SPA(单页) 进一步优化
SPA(单页) + SSR(服务器渲染)
详细的文档可以直接查看Github中的介绍，包含了概念、示例、API以及还有和一些框架（DVA）的对比
总结
任何框架或者技术的出现都是为了解决某些特定或者共性的问题，React作为前端最流行的框架之一，还是值得前端开发者所学习的，不必纠结只学React或者Vue，甚至还有Flutter，一般一个技术的诞生以及壮大，无疑不是解决了某些常见的痛点，而最毫无疑问的是其思想上突破，学习也是一样！