三千字详解 classnames，精读源码，解读重点功能的实现

前言

本文主要讲解 classnames 相关的知识点。

对 classnames 用法做了详细介绍。

对 classnames 源码，按照功能模块进行解读。尤其对于源码中关键代码从实现层面做了解读。

在总结过程中，对 CSS-in-JS 写法有了不同的想法，结合大佬的文章，将想法记录在了文末。

文章速读

阅读本篇文章，你将有如下图中的收获：

听说你叫 className

讲 classnames 之前，科普一点关于它「兄弟」 className 的知识点。

万物皆有源之 JSX

众所周知，在 Recat 中配合使用 JSX 语法。而 JSX 在语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称。

因此，在 React 中使用 className 为元素指定 CSS 的 class。

className 的两种用法

我们在 React 中是这样为元素添加样式的：

<div className="mt20">Hello World</div> 

或者根据某个变量的值进行动态绑定，如下就根据 selected 的值判断是否为元素添加 active 样式：

<div className={`${selected ? 'active' : ''}`}>{selectedText}
</div> 

必有但是

动态绑定的方式确实让代码变得更加灵活，但是上面这种 ES6 模板字符串的写法，当有多个判断的时，会显得臃肿且不好维护。

那，有没有更好的实现方案呢？

classnames 出现的契机

每当遇到一个新知识点，我总是不由的想，它为什么会诞生？它帮忙解决了什么问题？

开发者需要什么？

从前面的文字中提取关键讯息，不难发现，开发者需要更简洁的绑定多个 className 的方式。

classnames 是什么？

而 classnames 源码的第一句介绍，正好符合开发者的需要：

A simple JavaScript utility for conditionally joining classNames together.

直译过来就是

一个简单的、有条件的绑定多个 className 的 JavaScript 实用函数.

classnames 的用法

用前先安装

classnames 是一个第三方 JavaScript 库，使用前需要先安装。

npm、bower、yarn三件套

# via npm
npm install classnames

# via Bower
bower install classnames

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames 

语法

classnames 函数支持多个传参，参数的类型也支持数值、字符串、对象、数组等多种。

classnames(class1,class2,...classN) 

用法很多样