您现在的位置是：首页 > 文章详情

淘系前端架构周刊：ahooks 3.0 发布、Tailwind CSS v3.0

日期：2021-12-13点击：610收藏

昭昭前事，惕惕后人。

🗞 News

ahooks 3.0 发布

ahooks 作为 React 社区中优质可靠的 Hooks 库，经过近两年多的迭代，在国内外社区都获得了很多同学的认可，时至今日 ahooks 发布 3.0 版本，为我们带来了以下新特性：

全面支持 SSR
全新的 useRequest
所有的输出函数引用是固定的，避免闭包问题
DOM 类 Hooks 支持 target 动态变化
更合理的 API 设计
解决了在严格模式（Strict Mode）下的问题
解决了在 react-refresh（HMR）模式下的问题
新增了更多 Hooks
&etc.

Release Blog：ahooks 3.0 来了！高质量可靠的 React Hooks 库 - 知乎 (zhihu.com)

Home Page：ahooks - React Hooks Library - ahooks 3.0

GitHub Repo：GitHub - alibaba/hooks: A high-quality & reliable React Hooks library.

Tailwind CSS v3.0

此次更新，为我们带来了以下新特性：

运行时引擎（师承 WindiCSS）
开箱即用的颜色系统
可定制颜色的 box-shadow
Scroll snap API
多列布局
LTR & RTL 修饰符
&etc.

Release Blog：Tailwind CSS v3.0 – Tailwind CSS

GitHub Repo：tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development. (github.com)

📦 Open Source

fiber

一个受 Express 启发的 Web 应用框架，使用 Go 开发，语法与 Express 相近，同时性能也非常强劲。\

基础路由：

 func main() {     app := fiber.New()     // GET /api/register     app.Get("/api/*", func(c *fiber.Ctx) error {         msg := fmt.Sprintf("✋ %s", c.Params("*"))         return c.SendString(msg) // => ✋ register     })     // GET /flights/LAX-SFO     app.Get("/flights/:from-:to", func(c *fiber.Ctx) error {         msg := fmt.Sprintf("💸 From: %s, To: %s", c.Params("from"), c.Params("to"))         return c.SendString(msg) // => 💸 From: LAX, To: SFO     })     // GET /dictionary.txt     app.Get("/:file.:ext", func(c *fiber.Ctx) error {         msg := fmt.Sprintf("📃 %s.%s", c.Params("file"), c.Params("ext"))         return c.SendString(msg) // => 📃 dictionary.txt     })     // GET /john/75     app.Get("/:name/:age/:gender?", func(c *fiber.Ctx) error {         msg := fmt.Sprintf("👴 %s is %s years old", c.Params("name"), c.Params("age"))         return c.SendString(msg) // => 👴 john is 75 years old     })     // GET /john     app.Get("/:name", func(c *fiber.Ctx) error {         msg := fmt.Sprintf("Hello, %s 👋!", c.Params("name"))         return c.SendString(msg) // => Hello john 👋!     })     log.Fatal(app.Listen(":3000")) }

静态资源服务：

 func main() {     app := fiber.New()     app.Static("/", "./public")     // => http://localhost:3000/js/script.js     // => http://localhost:3000/css/style.css     app.Static("/prefix", "./public")     // => http://localhost:3000/prefix/js/script.js     // => http://localhost:3000/prefix/css/style.css     app.Static("*", "./public/index.html")     // => http://localhost:3000/any/path/shows/index/html     log.Fatal(app.Listen(":3000")) }

中间件：

 func main() {     app := fiber.New()     // Match any route     app.Use(func(c *fiber.Ctx) error {         fmt.Println("🥇 First handler")         return c.Next()     })     // Match all routes starting with /api     app.Use("/api", func(c *fiber.Ctx) error {         fmt.Println("🥈 Second handler")         return c.Next()     })     // GET /api/list     app.Get("/api/list", func(c *fiber.Ctx) error {         fmt.Println("🥉 Last handler")         return c.SendString("Hello, World 👋!")     })     log.Fatal(app.Listen(":3000")) }

相信熟悉 Express 的同学对它应该不会太陌生。

性能也非常强劲：

Home Page：Fiber (gofiber.io)

GitHub Repo：gofiber/fiber: ⚡️ Express inspired web framework written in Go (github.com)

Happy DOM

一个 jsdom 的替代品，用于支持 Web Components 的 SSR，旨在支持浏览器更多浏览器常用的功能。

Benchmark：

Operation	JSDOM	Happy DOM
Import / Require	333 ms	45 ms
Parse HTML	256 ms	26 ms
Serialize HTML	65 ms	8 ms
Render custom element	214 ms	19 ms
querySelectorAll('tagname')	4.9 ms	0.7 ms
querySelectorAll('.class')	6.4 ms	3.7 ms
querySelectorAll('[attribute]')	4.0 ms	1.7 ms
querySelectorAll('[class~="name"]')	5.5 ms	2.9 ms
querySelectorAll(':nth-child(2n+1)')	10.4 ms	3.8 ms