乐趣区

关于react.js:浅谈antd5使用心得

jiezi

antd v5 版本公布至今已有整整 4 个月了，在 v5 版本公布后我也是第一工夫把之前 v4 我的项目迁徙到了 v5，对于此次降级还是有很大的变动跟改良的，故在此浅聊一下我的迁徙经验和倡议，前提是你曾经通读过官网的迁徙指南。

重大改良

除了 ui 格调变动、更好的反对 Typescript、优化底层库的依赖等，我感觉此次大版本更新带来最大的变动是 CSS-in-JS 代替本来 less 的技术计划变更。升至 v5 后 antd 产物不再导出 css 文件，只有一个 reset.css，况且这个重置款式文件也只是为了让开发者不再去依赖其余的诸如 Normalize.css 的第三方库。

为什么说这是一次重大改良？做过 antd 切换主题性能的开发者应该深有体会，我在之前的文章也有介绍过实现计划：[前端实现切换主题计划](https://segmentfault.com/a/1190000042573976)。流程是先提前编译进去每种模式下的对应 less 文件，而后通过包裹 antd 提供的 ConfigProvider，依据 mode 的变幻动静传值批改 prefixCls 的值以动静批改组件内的款式，这样做有以下几种弊病：

  1. 每加一种主题就要编译一套 less，只管有很多反复的款式代码。
  2. 使得我的项目打包后的体积变得越来越臃肿。
  3. 保护起来十分吃力，因为每改一个 antd 组件的通用款式就要同时去批改每套主题下的 less 文件对应的雷同代码，只管他们只有 prefixCls 不同。
  4. 批改款式要分外重视款式权重问题，减轻了开发者的心智累赘。
  5. 批改主题可能会破费更多的工夫和写更多的代码，因为开发者须要去找到批改款式的元素的 dom 层级，而后在款式文件中为了权重问题须要写 full path。
  6. …（我没经验过的其余问题）

而采纳 CSS-in-JS 这样的技术计划则会大大改善以上问题的呈现：

  1. 首先它是一种将 css 代码写成 JavaScript 对象或函数的办法，因而能够通过应用变量、函数等动静生成款式，不便响应式设计。
  2. 并且相比 less 它作用域管制更容易，因而很好的解决了命名抵触和款式权重的问题。
  3. 在肯定水平上他解决了一部分性能优化的问题，因为缩小了申请 css 款式文件的 http 申请。

迁徙指南

如果我的项目中没有除了黑夜 \ 白天模式以外的其余主题，并且没有适配 IE 浏览器的需要，那么祝贺你，迁徙此我的项目的老本将是十分轻量级的，间接 yarn add antd 升级库版本，移除 v4 我的项目中援用到的 antd 内置的文件（antd/dist/antd.css），之前在 less 文件中通过 :global 去批改 antd 组件默认款式的行为同样会失效，如果之前做了主题切换性能的我的项目同样也能够把之前的主题款式文件删了，antd 内置了白天（default）、黑夜模式和紧凑模式的算法（algorithm）。这个 algorithm 在体现上来看能够了解为格调或者主题吧。那如果要批改单个组件的款式，比方 antd 按钮默认高度为 32，在某个业务场景下，这个按钮须要改成 40，那么能够批改主题中的 token 去实现这一目标而不必去批改款式文件，这个 token 怎么了解？能够看成是组成一个组件的每个颗粒化的款式，也就是一些款式变量名而已。

那么，为什么批改、token 的计划会比之前批改款式文件的计划要更优呢？

举个简略的例子，我要批改 Select 的高度，以前的做法是批改它的款式，然而现实中只有批改 height 属性就行了，然而往往不是，他还有 line-height 等其余款式会影响到布局，所以在过来，咱们要批改这类组件的款式，尽管仅仅是想扭转高度，然而还是不得已去扭转其余肯能会影响到布局的款式，比方：

<Select
  className={styles.input}
  style={{width: 200}}
  placeholder="请抉择...."
/>
.input {height: 40px;}

成果如下，能够显著看到 input 的高度没变，只是改了外层 container 的高度，并且图标也不居中了。

再看一下再 v5 版本中如何实现扭转高度：

<ConfigProvider
  theme={{
    token: {controlHeight: 40}
  }}
>
  {/* container 只是为了让 Select 居中显示 */}
  <div className={styles.container}>
    <Select
      className={styles.input}
      style={{width: 200}}
      placeholder="请抉择...."
    />
  </div>
</ConfigProvider>

成果如下，而我只是批改了一个变量值而已，其余的可能会导致布局的问题我一律不必去管。

如何实现主题切换性能

如果你只是须要实现白天黑夜模式的切换，那非常简单，因为 antd 内置了白天（默认）和黑夜模式的变量（算法），只有在我的项目中依据你的 theme mode 动静传递给 ConfigProvider 就行了，如果是全局失效，你只有在你的入口文件（jsx 或者 tsx）中配置即可：

<ConfigProvider
  theme={{
    algorithm:
      theme === 'dark'
        ? antdTheme.darkAlgorithm
        : antdTheme.defaultAlgorithm
  }}
>
  <div className={styles.container}>
    <Select
      className={styles.input}
      style={{width: 200}}
      placeholder="请输出...."
    />
  </div>
</ConfigProvider>

如下就是 dark 模式下的 Select 组件款式：

ConfigProvider 在 v4 版本中我只会在须要批改一些全局配置的时候会用到，比如说国际化、配置 prefixCls 等，然而在 v5 中我会频繁应用到，因为常常要用它来批改一些 antd 组件的部分款式，通过批改 token 变量值的办法，比方以下：

<ConfigProvider
  theme={{
    algorithm:
      theme === 'dark'
        ? antdTheme.darkAlgorithm
        : antdTheme.defaultAlgorithm
  }}
>
  <div className={styles.container}>
    <Select
      className={styles.input}
      style={{width: 200}}
      placeholder="请输出...."
    />
    <ConfigProvider
      theme={{
        components: {Button: { controlHeight: 26}
        }
      }}
    >
      <Button> 按钮 </Button>
    </ConfigProvider>
  </div>
</ConfigProvider>

那如何实现更多的自定义主题呢？其实思路跟 v4 是一样的，批改款式变量值，只不过在 v5 中是通过批改 js 变量，而在以前的版本是批改 less 变量，具体实现办法能够参考 antd v5 版本中 default（对应源码 components/theme/themes/default(或者 dark)），实质上是覆写变量值，只是变量名须要一一对应起来。

开发时应用技巧

应用 v5 版本这么长时间以来，除了在 nextjs 我的项目中最后版本会有水合问题以外，最大的问题就是你想去批改某个组件的某个部分款式，然而不晓得对应的变量名，我的倡议是 clone 一份 antd 最新版本的源码，在不晓得变量名（token）的时候去源码中 components 目录下找到你要的组件，而后找到其下的 style 目录，找到对应款式下它援用的 token 属性名，以 Button 组件的背景色为例：

那么，批改 colorBgContainer 就 ok 了：

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#FF9B50', // 主题色
      colorBgContainer: '#FF9B50' // 写在这里跟写在上面都一样
    },
    components: {Button: { controlHeight: 50, colorBgContainer: '#FF9B50'}
    }
  }}
>
  <Button className={styles.btn} onClick={handleDeposit}>
    <span style={{color: '#fff'}}>
      {isConnected ? `Deposit 3 ETH` : 'Unlock WalletConnect'}
    </span>
  </Button>
</ConfigProvider>

如果你只是针对某个业务场景下的某个组件批改部分款式，倡议写在 components 下，如果是某个模块中通用的款式，则抉择 token，实质上都是批改 token，只是划分区域更粗疏化而已。

应用案例

  1. Phalcon：弱小的区块链交易浏览器
  2. MetaSleuth：加密货币资金可视化剖析追踪工具
退出移动版