样式隔离方案
- React:CSS moduleCSS in JSBEM 命名规范
- Vue:官方支持 Style scopedBEM 命名规范
- React本身就是 Js 和 Jsx,并且 TS 专门开了后门给做了支持(Jsx 其实一开始没有类型支持,Tsx 的开发体验完全来自于 TS 专门针对 Jsx 制定的一整套推导机制),所以Tsx 的类型支持也很完善 。
- Vue2.x来自尤雨溪本人的回答是“因为当初API的设计根本就没有考虑类型系统”,2.x 跟 TS 的整合需要借助 vue-class-component 使用类组件进行开发,所以目前 2.x 版本的Vue对 TS 的支持度较React仍有差距,但是最近随着Vue2.7的发布,可以使 Vue2.x 用上大部分 Vue3 的写法,也使 Vue2.x 就具备了兼容 TS 的能力 。
- Vue3,根据来自官方的建议,IDE 支持需用<script setup lang="ts">+vscode+volar,一样能获得非常好的 TS 体验 。
- React:中规中距,案例仍然不够丰富,对于一些问题的答案需要借助社区,好在社区足够强大,属于疑难杂症的问题也能找到解决方案 。
- Vue:文档体验十分优秀且全面,介绍详细,几乎各种疑问均能找到答案 。
- 路由管理
- React-router 实现了核心路由功能 。React-router-dom 基于 React-router 开发,加入了在浏览器运行环境下的一些功能,如使用 Link 组件在浏览器中会渲染一个 a 标签,也支持 History 和 Hash 路由模式 。React-router-native 同样基于 React-router 开发,主要是集成了 React-native 运行环境下的功能 。
- 状态管理
- Redux 基础的状态管理库 , 引入了中间件 , 中间件位于视图层发出 action 后 , 到 reducer 之前触发 , 在中间件中可以执行比如日志打印、异步请求等操作 。原流程:view -> action -> reducer -> store中间件流程:view -> action -> middleware -> reducer -> store
- React-Redux 是 Redux 的插件库 , 用来简化 Redux 。
- Redux-thunk 用来处理异步的中间件 。
- Redux-saga 内部基于 generator 实现,用于管理 Redux 应用异步操作的中间件,与 thunk 不同点在于:thunk 是在 action 创建时调用,saga 是在应用启动时调用 。在 saga 中,任务都是通过 yield Effects 来完成的 。
- Mobx 不同于 Redux 状态管理方案,使用相对简单,是以数据驱动视图,通过数据绑定,只修改数据本身即可实现视图的更新 。
- 路由管理
- Vue
- 路由管理Vue router:官方支持
- 状态管理Vuex:官方支持
- App:在跨 App 界的一哥是ReactNative,以下简称 RN,因为笔者没有亲自体验过,所以不做过多阐述,但是鉴于 RN 是2015年4月问世,时间不短,并且也有足够的团队使用,目前看来在前端跨端的领域成熟度已经相当高了 。
- 小程序:对React支持度最好的当然是Taro了,一直在持续迭代中,也有来自京东凹凸实验室的背书,拥有较为稳定的产品和活跃社区,开发者可以大胆尝试,在最近迭代的Taro3 里也添加了对Vue3的支持 。
- App:的跨端尝试中没有占据绝对地位的框架,Weex 火过一阵,但是近些年热度下降,并且在 Apache Incubator 也已退休,虽然有阿里的背书,但是随着参与者减少,加上也不断听说阿里内部逐渐放弃 Weex 的传言,Github仓库最近一个更新也是1年前,前景未知,不推荐尝试 。Vue在最新的官方文档中推荐的跨端方案是 NativeScript 和 Capacitor,感兴趣的小伙伴可以自行查看 。
- 小程序:一种较为流行的跨端方案是 Uni-app,在兼容多端小程序上有较好的体验,对 Vue2 和Vue3有着天然友好的支持度,并且依照评测也提供着非常不多的性能(评测链接https://juejin.cn/post/6844904118901817351),文档体验着实是一言难尽……同时也支持 App 应用的开发 。另一种跨端方式是 Mpvue,来自美团,从 Github 的仓库看已经很久未曾更新,也就不做推荐了 。
- 多说几句在这里还要多啰嗦一下关于框架的跨端的个人理解,框架如果想跨端,那么在设计之初就要做核心与平台分离的设计,虚拟 DOM 就是一个非常典型的例子,它可以存储所有与 UI 的所有信息和交互逻辑,而在它上层与平台强相关的部分负责具体平台的逻辑实现,这也是典型的分层设计 。
- React推崇的是单向数据流(但是也提供了方法进行双向改变),是数据不可变性,不可直接改变数据本身,而是通过 hooks 或 setState 更新数据 。每次更新调用渲染函数从根节点生成新的虚拟 DOM 对比 旧虚拟 DOM,找到改变位置后进行 UI 的重渲染,这其中使用了基于链表数据结构的 Fiber 架构,在每帧渲染周期内的空闲时间进行 Diff 过程,具备可中断和可恢复的特性,以这种时间切片的方式不会阻塞主线程,以便执行更高优先级的任务,防止页面卡顿 。更新流程如下图(没有画出具体细节,只包含基本流程):
推荐阅读
- 京东云开发者|ElasticSearch降本增效常见的方法
- 云原生之旅 - 6)不能错过的一款 Kubernetes 应用编排管理神器 Kustomize
- Windows下自动云备份思源笔记到Gitee
- 云原生之旅 - 5)Kubernetes时代的包管理工具 Helm
- 云顶之弈碧波法师阵容怎么玩
- 云上当空接龙规则(接龙规则口诀)
- 云上空当接龙怎么玩(空当接龙怎么玩教学说明)
- mqtt_simple例程 nrf9160做主控连接阿里云——
- 云顶之弈S7.5怒玉豹女阵容怎么玩
- 云顶之弈玉龙怎么换形锤阵容