淘系前端架构周刊：ahooks 3.0 发布、Tailwind CSS v3.0
昭昭前事，惕惕后人。 🗞 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 相近，同时性能也非常强劲。\ 基础路由： funcmain(){ app:=fiber.New() //GET/api/register app.Get("/api/*",func(c*fiber.Ctx)error{ msg:=fmt.Sprintf("✋%s",c.Params("*")) returnc.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")) returnc.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")) returnc.SendString(msg)//=>📃dictionary.txt }) //GET/john/75 app.Get("/:name/:age/:gender?",func(c*fiber.Ctx)error{ msg:=fmt.Sprintf("👴%sis%syearsold",c.Params("name"),c.Params("age")) returnc.SendString(msg)//=>👴johnis75yearsold }) //GET/john app.Get("/:name",func(c*fiber.Ctx)error{ msg:=fmt.Sprintf("Hello,%s👋!",c.Params("name")) returnc.SendString(msg)//=>Hellojohn👋! }) log.Fatal(app.Listen(":3000")) } 静态资源服务： funcmain(){ 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")) } 中间件： funcmain(){ app:=fiber.New() //Matchanyroute app.Use(func(c*fiber.Ctx)error{ fmt.Println("🥇Firsthandler") returnc.Next() }) //Matchallroutesstartingwith/api app.Use("/api",func(c*fiber.Ctx)error{ fmt.Println("🥈Secondhandler") returnc.Next() }) //GET/api/list app.Get("/api/list",func(c*fiber.Ctx)error{ fmt.Println("🥉Lasthandler") returnc.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 GitHub Repo：capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components. (github.com) amis amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。 Home Page：介绍 (gitee.io) GitHub Repo：baidu/amis: 前端低代码框架，通过 JSON 配置就能生成各种页面。 (github.com) Mitosis 一款类 React 框架，口号是编写一次组件，在任何框架中使用，采用编译的方式将其编译为 Vue/React/SolidJS/Angular/Svelte 等组件。 GitHub Repo：BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more. (github.com) 📑 Article TypeScript 类型中的逆变协变 原文链接：TypeScript类型中的逆变协变 (qq.com)
