Chakra UI：隐藏的宝藏

几个月前，我发现了Chakra UI（由Sage开发），并从中学到了很多东西。

我从 2017 年开始使用 React 编写代码，也用过 Less、Sass、styled-components，甚至 StyleSheet react-native。但这次我找到了更流畅的方法。

简单介绍

你用过吗styled-components？Chakra UI 将所有 CSS 字符串移到了 props 中，就像下面这样Box，一个div包装器：

<Box height={4} width="20rem" bg="blue.100" />

这太棒了。🤩

默认主题也很灵活，您可以覆盖任何您想要的内容，还可以创建自定义组件来扩展内置的 Chakra 组件。

如果您是 TypeScript 爱好者：其类型非常一致。

但这篇文章并不是介绍……

宝藏在哪里？

就像所有宝藏一样，这个宝藏并不在表面，你需要深入挖掘。我克隆了 Chakra UI 的源代码，发现了很多东西。

项目结构

Chakra 是使用每个模块的包构建的👌；其中一些是内部包，另一些是公共包，由主包@chakra-ui/react导出。您可以逐个包地学习如何使用lerna和构建这个系统。📦

钩子

我研究的第一个包是@chakra-ui/hooks，并且发现了第一个宝藏：

useOutsideClick是一个常用的钩子函数，用于在用户点击弹窗外部时隐藏弹窗。还有useMergeRefs函数，用于将多个 React 引用合并为一个。我为这两个钩子都贡献了文档页面。😁

您可以找到更多有用的 钩子。

比如这个特别的：usePopper ，它是popper.js 🍿 库的包装器，可以将其转换为一个魔法钩子。这是一个内部钩子，网站上没有文档记录，但仍然可以导出并使用它，缺点是⚠️它不受semver的保护。🙀

实用程序

另一个内部包是@chakra-ui/utils。

这里你可以找到Lodash 库中用于数组的函数，以及管理函数和解析数字的函数。

另一个与作为依赖项的对象lodash.mergewith一起工作。

您可以使用它addDomEvent来添加全局事件监听器而不会发生泄漏。

import {addDomEvent} from '@chakra-ui/utils';

const MyNiceFeature = () => {
  const [height, setHeight] = useState(window.innerHeight - 50);
  useEffect(
    () =>
      addDomEvent(window, 'resize', () =>
        setHeight(window.innerHeight - 50),
      ),
    [],
  );
  ...
};

如果这些帮助程序已经加载到您的捆绑包中，为什么要重复代码而不是重新使用它？

React 代码

我发现自己在阅读Sage及其贡献者的代码时，学习了另一种处理大型 UI 组件的方法，比如@chakra-ui/menu。使用钩子和事件处理程序，以流畅的方式处理用户交互。🤯

结论

我找到了一个漂亮又好用的 UI 库，可以在 React 组件内部处理 CSS，无需使用字符串模板。同时，我也找到了一个学习新东西的资源：

• 如何使用可重复使用的钩子和函数处理 UI 行为。
• 一个隐藏的工具箱，我也可以用它来制作我自己的组件。
• 在 monorepo 中使用 Lerna 的路径。
• 在 CSS 中从px到单位的传递指南。rem

缺点

• 您需要自定义主题的一些调整并未明确记录。
• 社区正在不断发展，但不如“styled-components”那么大。
• 该文档尚在编写中，您必须通过阅读源代码才能理解一些高级功能。

我希望你也能爱上 Chakra UI 以及这款开源软件的强大功能。🥰 #分享知识