当下 React 项目该放弃的以及更好用的技术推荐

React 版本推荐

当前 React 都已经发布 18 了，虽然是个 alpha 版本，但是 17 确实也已经有大厂在用了。

目前如果你的版本还停留在 v16.8 之前的话还是尽早升了吧。毕竟 Hooks 在前几年还会吵吵不好用，现在就各种真香，毕竟代码是真的省了不少，那点学习成本相比收益而言太低了。

同时 Hooks 的使用还能相对解决一部分状态管理的痛苦，实际上大部分项目需要的只是跨组件的通信，而不是管理。因此引入状态管理存粹是增长项目负担，还不如直接用自带的 useContext 解决问题。

网络请求库

axios 大家肯定耳熟能详，实际上在 React 中存在比 axios 好用太多的网络请求库了。

笔者以 swr^[1] 举例，除了核心的网络请求之外，这个库还附带了一系列很棒的功能，比如说：

•内置缓存•快速页面导航•间隔轮询•数据依赖•聚焦时重新验证•网络恢复时重新验证•本地缓存更新 (Optimistic UI)•智能错误重试•分页和滚动位置恢复

这一系列的功能不比单纯用 axios 香么？虽然 swr 也支持使用 axios 去请求数据，但少用一个库岂不是更好，除非你的用户还在用不支持 fetch 的浏览器。

当然除了 swr，还存在不少竞品，比如说 React-Query^[2]，对于这类产品的选择就交给读者了。

CSS

时至今日笔者还能在群里看到群友讨论学 Sass 还是 Less 好，其实预处理器在当前的作用已经相当低了。你要说支持嵌套写法，其实 CSS 新的提案已经支持这种写法了，如下图：

Group.png

你可以在这个文档^[3]下查询该提案的细节。

再说回别的功能，比如说变量、函数等等都有解决方案，所以说这类预处理器后面会逐渐退出舞台。

当然有该放弃的，也有可以尝试使用的，比如说：

•Atom CSS，代表作是 tailwindcss^[4]•CSS-in-JS，代表作是 styled-component^[5]

前者能提高写 CSS 的效率，也能规范样式的使用，同时还能大幅度减少大项目的 CSS 代码体积，可谓一举多得。

后者充分利用了 JS 工具链的优势，去除取名痛苦、减少死代码的产生、方便动态切换主题等等功能，也是一个不错的选择。

当然在引入新技术的同时也会带来一些痛点，毕竟世界上并不存在完美的技术方案，具体对于这些的介绍你可以阅读笔者之前的文章^[6]。

工具链

时至今日，已经有越来越多的前端工具链产品开始用 Go 或者 Rust 重写，近期就有著名的工具链 Rome 招聘 Rust 开发者重写 Rome：

image-20210804221910647

所以说未来一定会有越来越多性能更好的工具链产品出现，也会有如今我们耳熟能详的产品退出历史舞台。

如今笔者就能介绍不少大家耳熟能详的产品的更好替代品：

•Babel：转译龙头，没有一个项目不使用它。但是如今 esbuild^[7]、swc^[8] 凭借快数十倍的效率在某些情况下已经能完全替换 Babel。•Webpack：大部分应用肯定都在用它吧，但是因为本身的一些特性导致在开发阶段对于大型项目而言构建过于缓慢。bundless 方案就是为了解决这个问题的，代表作 Vite^[9]、Snowpack^[10] 在本地的构建效率较之 Webpack 有很大的提升，往后有希望在本地构建环节中替代 Webpack。•包管理器：npm、yarn 大家肯定都在用，但是这些产品又不免存在一些依赖管理层面的问题，pnpm^[11] 应运而生，专为解决这一系列问题而来，另外提上一嘴，yarn 已经发布 3.0 了，但是想必不少小伙伴还在用 1.x 的版本吧。

最后

文章到这里肯定会有读者说：「那么多新东西，又得学了！」。实际上笔者觉得这是一个好现象，有新东西学才能弯道超车，啥东西不变才真的会卷死各位。就比如说现在工具链都在用非 JS 来写以获得更好的性能，这不就是一个绝佳弯道超车的机会么？学好 Go 或者 Rust 然后做 / 贡献一个项目不就起飞了？

真的别再说前端东西说或者卷了，殊不知后端才是更卷的地方，难道东西不变大家都躺平不学了？

欢迎读者留言探讨本文相关话题！

引用链接

[1] swr: https://github.com/vercel/swr
[2] React-Query: https://react-query.tanstack.com/
[3] 文档: https://drafts.csswg.org/css-nesting-1/
[4] tailwindcss: https://tailwindcss.com/
[5] styled-component: https://styled-components.com/
[6] 文章: https://juejin.cn/post/6927828841645735949
[7] esbuild: https://esbuild.github.io/
[8] swc: https://github.com/swc-project/swc
[9] Vite: https://vitejs.dev/guide/why.html#slow-server-start
[10] Snowpack: https://www.snowpack.dev/
[11] pnpm: https://pnpm.io/zh/