vlambda博客
学习文章列表

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

新的一周,快来看看上周发生了哪些新鲜事吧!

科技趣闻

1. Vue 全新中文文档发布

近期,Vue发布全系官方文档,全新的文档主要有以下变化:

  • 深色模式;
  • 响应式设计;
  • 风格切换功能;
  • 互动教程;
  • 新增范例;
  • 优化搜索;
  • 重做指导;
  • 单页面导航;
  • VitePress构建;
  • 水合静态内容。
前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Vue 全新文档:https://vuejs.org/

Vue 全新中文文档:https://staging-cn.vuejs.org/

Vue 全新中文文档更新详情:https://juejin.cn/post/7077701166397653028

2. Vitest 全新中文文档发布

近期,Vitest 发布全新中文文档。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Vitest 是一个由 Vite 提供支持的极速单元测试框架。其特性如下:

  • 与Vite通用的配置、转换器、解析器和插件;
  • 使用你的应用程序中的相同配置来进行测试;
  • 智能文件监听模式,就像是测试的 HMR;
  • 支持测试 Vue、React、Lit 等框架中的组件;
  • 开箱即用的 TypeScript / JSX 支持;
  • ESM 优先,支持模块顶级 await;
  • 通过 tinypool 使用 Worker 线程尽可能多地并发运行;
  • 套件和测试的过滤、超时、并发配置;
  • Jest 的快照功能;
  • 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API;
  • 内置用于对象模拟(Mock)的 Tinyspy;
  • 使用 jsdom 或 happy-dom 用于 DOM 模拟;
  • 通过 c8 来输出代码测试覆盖率;
  • 类似于 Rust 语言的源码内联测试。

Vitest 全新中文文档:https://cn.vitest.dev/

3. Pinia 正式成为 Vue 官方默认推荐的状态管理库

近期,Pinia 正式成为 Vue 官方默认推荐的状态管理库。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。Pinia.js 有如下特点:

  • 完整的 TypeScript 的支持;
  • 足够轻量,压缩后的体积只有1.6kb;
  • 去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点);
  • actions 支持同步和异步;
  • 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割;
  • 无需手动添加 store,store 一旦创建便会自动添加;

Pinia 官网:https://pinia.vuejs.org/

4. Google向32亿Chrome用户发出紧急安全警告:呼吁尽快更新

近日 Google 向 32 亿 Chrome 用户发出紧急安全警告,因为 Google 已确定攻击者已使用这个高严重性 Zero-Day 漏洞 CVE-2022-1096 作出攻击。因此,Google Chrome 推出了99.0.4844.84 新版。之前,Google 很少为一个单一的安全漏洞推出新版本,严重性可见相当严重,建议所有 Chrome 用户尽快更新。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新速递

1. React 18.0 正式发布

3月30日,React正式宣布 React v18.0 正式发布,React 18 主要更新内容如下:

  • 自动批处理;
  • Transitions;
  • 新的Suspense 功能;
  • 新的客户端和服务器渲染 API;
  • 新的严格模式行为;
  • 全新的hooks:useId、useTransition、useDeferredValue、useSyncExternalStore、useInsertionEffect
前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新详情:https://reactjs.org/blog/2022/03/29/react-v18.html

2. Electron 18.0 正式发布

3月30日,Electron 官方团队宣布正式发布Electron 18.0.0。Electron 18.0 主要更新内容如下:

  • 支持 Chromium 100;
  • 支持 Node.js 16.13.2;
  • 支持 V8 10.0;
  • 添加了ses.setCodeCachePath()API 用于设置代码缓存目录;
  • 删除了基于BrowserWindowProxy的window.open的旧实现,这也删除了webPreferences中的nativeWindowOpen选项;
  • 将“focus”和“blur'”事件添加到WebContents;
  • 在 macOS 上添加了 Substitutions 菜单角色:showSubstitutions, toggleSmartQuotes, toggleSmartDashes, toggleTextReplacement;
  • 在app.requestSingleInstanceLock()flow 中添加了first-instance-ack事件,这样用户就可以从第二实例向第一实例传递一些数据;
  • 在setBackgroundColor中增加了对更多颜色格式的支持。
前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新详情:https://www.electronjs.org/blog/electron-18-0

3. Chrome 100 正式发布

3月30日,谷歌发布了新版本 Chrome 浏览器,版本号为100。包括Mac、Windows和安卓、iOS平台均已更新。Chrome 100使用新的图标,简化了品牌图标,去掉了阴影,细化了比例,亮化了颜色,以便与谷歌更现代的品牌表达相一致。

Chrome 100继续大幅减少内存、CPU占用率,速度更快。在Chrome 100中,谷歌取消了“精简模式”。还引入了一个数字商品API。这将使Play Store中的网络应用能够接受数字购买。这实质上是对 Android Play Billing API 的打包,并使提供数字购买的网络应用可以从Play Store中安装。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新详情:https://developer.chrome.com/blog/new-in-chrome-100/

4. Vite 2.9.0 正式发布

3月30日,Vite v2.9.0 正式发布。该版本主要更新如下:

  • 更快的冷启动;
  • 开发期间的 CSS Sourcemap 支持;
  • 默认情况下避免拆分供应商块;
  • Web Worker 增强功能;
  • 原始 Glob import;
  • envDir变化;
  • 插件和框架作者的新工具。
前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新详情:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30

5. React Native 0.68 正式发布

3 月 30 日,React Native 宣布正式发布 React Native 0.68.0 版本。可选择加入新的 React Native 架构、错误修复等。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

更新详情:https://reactnative.dev/blog/2022/03/30/version-068

开源趋势

下面来看看上周GitHub上有哪些热门的前端开源项目吧!

1. cider

cider 是一个 基于 Electron 和 Vue.js 的全新跨平台 Apple Music 体验,从头开始编写,并考虑了性能。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Star⭐:2.8k

本周Star⭐️:901

Github:https://github.com/ciderapp/Cider

2. autocomplete

Fig 将自动完成添加到终端。当在终端中输入时,Fig 会在现有的 macOS 终端中弹出子命令、选项和上下文相关的参数。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Star⭐:14.6k

本周Star⭐️:750

Github:https://github.com/withfig/autocomplete

3. Regex-Vis

Regex-Vis 是一个正则表达式可视化器和编辑器。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Star⭐:1.1k

本周Star⭐️:321

Github:https://github.com/Bowen7/regex-vis

4. Photoview

Photoview 是一个简单且用户友好的照片库,专为摄影师设计,旨在提供一种简单快捷的方式来浏览目录,其中包含数千张高分辨率照片。将 Photoview 配置为在文件系统的目录中查找照片和视频。扫描仪会自动拾取您的媒体并开始生成缩略图,以使浏览速度超级快。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Star⭐:2.2k

本周Star⭐️:260

5. Docusaurus

Docusaurus 是Facebook 推出的一个用于轻松构建、部署和维护开源项目网站的项目。可以用于快速搭建文档类网站。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

Star⭐:32k

本周Star⭐️:235

Github:https://github.com/facebook/docusaurus

工具推荐

下面来推荐几个热门的 React 状态管理库!

1. Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

GitHub:https://github.com/reduxjs/redux

2. Mobx

Mobx是一个透明函数响应式编程(Transparently Functional Reactive Programming,TFRP)的状态管理库,它使得状态管理简单可伸缩。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

GitHub:https://github.com/mobxjs/mobx

3. Recoil

Recoil 是一个用于 React 应用程序的实验性状态管理库。它提供了一些单独使用 React 难以实现的功能,同时兼容 React 的最新功能。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

GitHub:https://github.com/facebookexperimental/Recoil

4. Hookstate

Hookstate 是一个基于 hook 的 React 简单但非常强大且速度极快的状态管理库。它是Redux,Formik 的现代替代品,没有样板性能。它简单易学,使用起来非常灵活。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

GitHub:https://github.com/avkonst/hookstate

5. Rematch

Redux 是一个了不起的状态管理工具,由健康的中间件生态系统和优秀的开发工具支持。Rematch 以 Redux 为基础,减少样板文件并强制执行最佳实践。

前端周刊 | React 18、Electron 18、Chrome 100 正式发布; Vue、Vitest 发布全新中文文档

GitHub:https://github.com/rematch/rematch

6. Jotai

Jotai 是一个 React 的原始和灵活的状态管理库。它类似于 Recoil,但具有更小的包大小(3.2 KB vs 21.1 KB)、更简约的 API、更好的 TypeScript 支持、更广泛的文档以及没有实验性标签。

GitHub:https://github.com/pmndrs/jotai

7. Zustand

Zustand 使用简化通量原理的小型、快速和可扩展的熊骨状态管理解决方案。有一个基于钩子的舒适 api。

GitHub:https://github.com/pmndrs/zustand


往期推荐: