react页面数据过多怎么办_React状态数据流管理框架，SPA（单页面）+SSR（服务器渲染）...

最新推荐文章于 2023-09-22 15:56:58 发布

哈特曼

最新推荐文章于 2023-09-22 15:56:58 发布

阅读量246 react页面数据过多怎么办

本文链接：https://blog.csdn.net/weixin_34198817/article/details/112361624

介绍

笔者在浏览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、loadingclass 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, }); }}