UI组件库的选择

选择适合自己项目的UI组件库是前端开发中至关重要的决策, 一个优秀的UI组件库可以提供丰富的界面元素和功能组件，帮助快速构建现代化的用户界面。在做出选择之前，需要仔细评估项目需求和目标，考虑到组件库的可定制性、易用性、性能和兼容性等方面。通过选择合适的UI组件库，可以大大提高开发效率和用户体验，为项目的成功奠定基础。

css-in-js组件库

其实我并不太推荐使用css-in-js组件库，因为css-in-js组件库的样式是使用js代码动态生成的，这会带来一些性能问题。

危险

最为重要的一点就是，ssr渲染css-in-js组件是会出现 页面闪烁!!!，由于css-in-js的css样式是由js动态生成的，当你的js尚未加载完成时页面会显示一个没有样式的html内容, 当js加载并执行之后，页面才会显示完整的样式，这一过程会导致页面闪烁!!! , 如果你能接收当我没说。

很不幸，antd的样式就采用了css-in-js的方案，很难受啊，网上也有一些网友曾提到过antd的样式闪烁问题，不过，antd官方也提供了一些解决方案，可以参考 antd官方文档，简单说一下原理其实就是将样式代码提取出来，然后通过style标签插入到html中，但是我认为这种方案不好，虽然可以解决闪烁问题，但是没办法很好的利用link标签的预加载功能，而且antd的样式代码量比较大，提取出来之后，html文件会变得很大，同样官方也给出了该问题的处理办法，但是过程很繁琐，有兴趣的可以自行研究。

推荐的UI组件库

与其折腾antd那些繁琐的配置，不如我推荐大家直接使用 react-bootstrap ，这个组件库的样式使用的是传统的scss预处理器，没有使用css-in-js的方案，因此不会出现样式闪烁的问题，而且使用起来非常简单，开箱即用。

安装依赖

npm install react-bootstrap bootstrap

导入样式

css
scss

import 'bootstrap/dist/css/bootstrap.min.css';

@import 'bootstrap/scss/bootstrap';

使用组件

import {Button} from 'react-bootstrap';

function Example() {
  return (
    <Button>Default</Button>
  );
}

有些小伙伴可能担心这样导入组件会导致打包体积过大，其实不然，next.js针对react-bootstrap的组件库做了一些优化，它是按需加载的，具体优化的第三方库有：

lucide-react
date-fns
lodash-es
ramda
antd
react-bootstrap
ahooks
@ant-design/icons
@headlessui/react
@headlessui-float/react
@heroicons/react/20/solid
@heroicons/react/24/solid
@heroicons/react/24/outline
@visx/visx
@tremor/react
rxjs
@mui/material
@mui/icons-material
recharts
react-use
@material-ui/core
@material-ui/icons
@tabler/icons-react
mui-core
react-icons/*

参考：

antd官方文档: https://ant.design/
react-bootstrap官方文档: https://react-bootstrap.netlify.app/

UI组件库的选择

css-in-js组件库​

推荐的UI组件库​

参考：​

css-in-js组件库

推荐的UI组件库

参考：