这是我参与「第五届青训营 」伴学笔记创作活动的第8天。

一、本堂课重点内容

• React状态管理库
• React应用级框架

二、详细知识点介绍

React状态管理库

当两个关系较远的组件需要共享状态的时候，需要将状态上升到较高的位置，为解决所有状态上升到较高节点的问题。

React状态管理库将状态抽离到UI外部进行统一管理。

但为啥还要将状态放在组件内部？全部使用这种方式的问题是什么？

• 这种集中的状态管理方案会降低组件的复用性，组件和外部的数据store造成了强耦合，不利于组件库的开发。这种情况多出现在业务代码中，而不会出现在组件库中。
• 从语义上讲，一个状态完全被一个组件拥有的话，这个状态不应该被其他组件看到，最好在store中只存放各个组件需要共享的状态。

抽象的看，把所有的组件看成一个大的组件，这个大的组件的状态是store的状态。

React状态管理库，将状态抽离到UI外部进行统一管理

• redux
• xstate，状态机思想
• mobx
• recoil

放在状态管理库的原则：当前状态是否是整个app拥有的？如currentUser，就可以是整个app拥有的状态。

React应用级框架

React未提供服务端渲染，页面路由等功能

Next.js，Vercel公司开发，编译快，性能高

Modern.js，字节跳动开发，内置很多开箱即用能力

Blitz，无API思想的全栈开发框架，避免了前后端的HTTP接口，写代码的时候相当于前端直接访问数据库，但生成的时候会前后端连接，但开发者无需过问。

三、实践实习例子

Modern.js/Reduck

countModel只要被声明，就可以在app任何位置使用，而且是单例的，全局是共享的。

import { model,useModel } from "@modern-js/runtime/model";
const countModel = model("count").define({
    state:{
        x:0,
        y:0,
    },
    actions:{
        incrementX(state){
            state.x+=1;
        },
        incrementY(state){
            state.y+=1;
        },
    },
});
// 在组件中只需要通过[{x,y},{incrementX,incrementY}]=useModel(countModel);即可使用
// 组件中直接调用 incrementX();即可

四、课后个人总结

本节课学习了React的状态管理库，介绍了使用状态管理库的利弊，学习了使用状态管理库的原则，并了解了一些常见的React状态管理库，尝试使用Modern.js实现React的状态管理。本节课还学习了React应用级框架，了解到React原生框架的不足，并了解了一些React的应用级框架，希望以后继续学习研究。

五、参考链接

Modern.js - 现代 Web 工程体系 (modernjs.dev)

Next.js - React 应用开发框架 | Next.js中文网 (nextjs.cn)

Blitz.js - The Missing Fullstack Toolkit for Next.js (blitzjs.com)