2022年末React新手选择指南

108 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

导言

本文将对一些React新手需要了解的框架选型进行介绍,有需要的可以选择性获取。

Cli

关于如何创建一个React项目,可以选择从官方的create-react-app开始,这将引领你的一步步的创建你的项目。

同时今年Vite也是一个不错的选择,运行十分的快速,我在一些本地demo项目上已经直接Vite而不是CRA了。

如果你期望一个大而全的配置,那么umi也是一个很好的选择,可以直接用于项目开发。

除此之外,另外一个值得关注的Cli是Next,它提供了包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能。

包管理器

今年我们全面拥抱了pnpm,如果你还没体验的话,值得一试。它的速度和效果都一流的棒。

同时别忘了yarn,在使用pnpm之前,我们也一直使用yarn。

如果你的项目使用了monorepo,那么强烈推荐pnpm+Turborepo的组合。Turborepo的管道流,可以使你更好的处理你的monorepo项目,强大的编排能力能使你得心应手。

状态管理

你可能已经习惯了hooks的便利,对useState,useRedux,useContext得心应手。现在如果在使用Redux,别忘记了Redux Toolkit来对你的使用进行增强。

今年上升最快的黑马当属Zustand了,以其耦合低而快速得以推广。 Zustand 只在 state 的值改变时渲染组件, 通常可以处理状态的改变而无需渲染代码。- 状态管理通过简单定义的操作进行集中和更新, 在这方面和 Redux 类似, 但是又和 Redux 不太类似, Redux 开发必须创建 reducer、action、dispatch来处理状态, Zustand 让它变得更加容易。同时其通过消除使用 Context Provides 从而使代码更短、更易读

当然在处理数据可变性的问题上,可能你还需要借助Immer。。Immer 可以在需要使用不可变数据结构的任何上下文中使用。例如与 React state、React 或 Redux reducers 或者 configuration management 结合使用

Css

可能你已经熟练使用了css module,通过import的方式导入css。那么是时候学习下css in js了,在这里推荐的是styled-components。支持变量,支持props传入。它既具备了 css-in-js 的模块化与参数化优点,又完全使用CSS的书写习惯,不会引起额外的学习成本

当然可能你有时不需要这么复杂,你只是单纯的想写逻辑代码,Tailwind CSS也是一个很好的选择。原子化的解决你的样式问题。Tailwind CSS 没有组件集合,所以即使你创建一个名为相同按钮的组件,每个人都会应用不同的Utilize Class创建它,可以创建出一个高度原创的网站

UI组件库

B端的UI组件库一直被antd占据,就如同vue的element一样,它刚刚推出了5.0。其目的助力设计开发者「更灵活」地搭建出「更美」的产品,让用户「快乐工作」。同时你也可以通过公共变量的注入,打造符合自己公司设计规范的ui展示效果。

今年我也关注semi.desig,以其跟figma的高配合度而受到关注。你可以通过figma的semi插件,直接从figma生成代码,大大提高了开发的view层的搭建效率。

图表工具

我使用的是rechats,用解耦的、可重用的 React 组件快速构建你的图表。 它依赖于轻量级的 D3 子模块构建 SVG 元素。

但是我也推荐antd G6。在进行拓扑图,节点图等复杂图表的时候,十分的方便。

文档工具

docusaurus是我比较喜欢的文档,Docusaurus 会帮助你在极短时间内搭建漂亮的文档网站。在之前的文章 舍弃传统文档阅读吧!~新一代代码文档神器code-hike中,我就是使用docusaurus来进行搭建的。

UED配合

Figma无疑是目前最好用的ui交互工具,以其无代码的拖拽化操作,丰富十足的插件,从UED到开发的无缝衔接,快速的占领了市场,唯一的问题可能就是价格。