2022 年的 React 生态

• CSS-in-CSS 方案：CSS Modules

• CSS-in-JS 方案：Styled Components （目前最受欢迎）

• 备选：Emotion 或 Stitches

• 函数式 CSS：Tailwind CSS

• 备选：CSS 类的条件渲染：clsx

链接：

• styled-components：https://www.robinwieruch.de/react-styled-components/

• Tailwind CSS：https://tailwindcss.com/

• clsx：https://github.com/lukeed/clsx

阅读：

• 《React中CSS-in-JS的最佳实践》：https://juejin.cn/post/6935245880568053791

• 《React中的CSS样式》：https://www.robinwieruch.de/react-css-styling/

• 《10种现在流行的CSS解决方案》：https://juejin.cn/post/6844903633109139464

• 《CSS-in-JS vs CSS》：https://bejamas.io/blog/css-performance/

• 《看完了 2021 CSS 年度报告，我学到了啥？》：https://juejin.cn/post/7043577751344775176

---

组件库

---

对于初学者来说，从零开始构建可复用的组件是一个很好的学习经验，值得推荐。无论它是 dropdown、radio button 还是 checkbox ，你最终都应该知道如何创建这些UI组件组件。

然而，在某些时候，你想要使用一个UI组件库，它可以让你访问许多共享一套设计系统的预构建组件。以下所有的UI组件库都带有基本组件，如 Buttons、Dropdowns、Dialogs 和 Lists：

• Material UI (MUI) (最流行)：https://material-ui.com/

• Mantine (最推荐)：https://mantine.dev/

• Chakra UI (最推荐)：https://chakra-ui.com/

• Ant Design（国内最流行）：https://ant.design/

• Radix：https://www.radix-ui.com/

• Primer：https://primer.style/react/

• NextUI：https://nextui.org/

• Tailwind UI (收费的)：https://www.tailwindui.com/

• Semantic UI：https://www.robinwieruch.de/react-semantic-ui-tutorial

• React Bootstrap：https://react-bootstrap.github.io/

尽管所有这些UI组件库都带有许多内部组件，但它们不能让每个组件都像只专注于一个UI组件的库那样强大。例如 react-table-library 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。

阅读：

• 《从零到一搭建React组件库》：https://segmentfault.com/a/1190000039852833

---

动画库

---

Web 应用中的大多数动画都是从 CSS 开始的。最终你会发现 CSS 动画不能满足你所有的需求。通常开发者会选择 React Transition Group，这样他们就