React CSR数据流选型指南

最新推荐文章于 2022-12-08 14:45:49 发布

置顶

50岁的星空

最新推荐文章于 2022-12-08 14:45:49 发布

阅读量318

点赞数

分类专栏： javascript react 文章标签： javascript react reactjs 前端 es6

本文链接：https://blog.csdn.net/u012736939/article/details/109523122

版权

本文探讨了客户端渲染（CSR）场景下的数据流选择，分析了Redux、DVA、React Hooks、Recoil等流派的优缺点。作者建议根据业务需求、底层变化适应性、逻辑复用性和解决问题的能力来平衡选择数据流框架。React Hooks和Recoil在异步事务和逻辑复用上有优势，而Redux-DVA流派适合全局状态管理和回溯。对于未来的并发模式，Recoil和Jotai有较好的兼容性。

摘要由CSDN通过智能技术生成

一、引言

CSR：(client side render)客户端渲染，SSR：(server side render)服务端渲染。面向的场景不同，最佳实践的数据流选择也不同。SSR通常适合首屏性能、安全性、SEO或存在静态页面体量需求较高的场景。推荐选择支持GraphQL的开发框架。比如apollographql、relay，nextjs，gatsby 等, 上了框架，往往数据流的选择空间有限，且GraphQL在浏览器缓存及数据一致性问题上一直是业界头疼的问题。故在数据流的选型上本文仅面向CSR谈谈自己的理解。

适用对象：适合未使用开发框架、喜欢尝鲜的同学，框架通常会在数据流上做强约束。比如阿里的ice，数据流通常约束为icestore。umijs数据流通常约束为dva, 或者通过webpack插件扩展成其他，比如hox。成体系化的框架，适合团战，开发效率高，但是较难拥抱变化，最佳实践往往需兼顾既往业务包袱，常常负重前行…

二、数据流流派划分

Facebook React官方正品数据流只有一个，就是组件的 props。

然而开发者在组织业务代码时，通常会选取些更适合代码和业务逻辑组织的数据流框架。，比如react 的hook之前redux、redux-saga、dva、mobx、rxjs、react-context 等等，hook 之后 unstated-next、recoil、hox 、easy-peasy、little-saga 等等。总结下react数据流的发展经历的几波流派，从最早的 redux、mobx、context 三大流派争鸣。到了现今多数皆已接轨了hook的时代，为方便归纳，从消费代码的角度，根据代码书写的方式，大致分为3派(以较著名的代表库、或想法命名)：

1、redux-dva 流派

该流派思想源自redux，写法上取经于dva。依然保留将state、reducer、dispatch、effect集中管理的方式，通过hook，提供给组件使用。通常使用的库有：icestore 、easy-peasy 、unistore 、freactal 、kea 、zustand 等…

代码组织以icestore为例：

// 1️⃣ Create a custom hook as usual
const counter = {
   
  state: 0,
  reducers: {
   
    increment:(prevState) => prevState + 1,
    decrement:(prevState) => prevState - 1,
  },
  effects: () => ({
   
    async asyncDecrement() {
   
      await delay(1000);
      this.decrement();
    },
  })
};

const models = {
   
  counter,
};

// 2️⃣ Create the store
const store = createStore(models);

// 3️⃣ Consume model
const {
    useModel } = store;
function Counter() {
   
  const [ count, dispatchers ] =