我們或許不需要 classnames 這個庫

項目許多庫都不是必要的, 我們一個個移除, 今天先移除 classnames

使用 classNames 的情況:

import classNames from 'classnames';

export default ()=> {
  // className 的值: 'dog cat'
  return <div className={classNames('dog', {'cat':true, 'fish':false})} />
}

如果不使用classNames:

根據條件組合樣式

export default ()=> {
  // className 的值: 'dog cat'
  return <div className={['dog', true && 'cat', false && 'fish'].filter(Boolean).join(' ')} />
}

有的童鞋會說, 參數太長了, 我們簡化它

我們保留最后輸出的 false 字符串, 為了減少瀏覽器查找 flase 樣式的時間, 聲明一個空的 .false css樣式, 這樣可以移除 filter(Boolean) 步驟:

// css
.false {}
export default ()=> {
  // className 的值: 'dog cat false'
  return <div className={['dog', true && 'cat', false && 'fish'].join(' ')} />
}

方案2, 僅使用字符串

這個方案的缺點是不夠直觀, 但是它的總長度更短

export default ()=> {
  // className 的值: 'dog cat false'
  return <div className={`dog ${true && 'cat'} ${false && 'fish'}`} />
}

如代碼所述, 我們最后用了簡單的一個語法就達到了目的, 簡約便捷.

方案3, 簡單封裝

function names(obj) {
  let className = ''
  for(const k in obj) {
    className += obj[k] || ''
  }
  return className;
}

export default ()=> {
  // className 的值: 'dog cat'
  return <div className={names({dog: 1, cat: 0, fish: 1})} />
}

方案4, 讓 className props 更短

這個方案不太推薦, 因為適應性不強

function names(obj) {
  let className = ''
  for(const k in obj) {
    className += obj[k] || ''
  }
  return { className };
}

export default ()=> {
  // className 的值: 'dog cat'
  return <div {...names({dog: 1, cat: 0, fish: 1})} />
}

性能如何?

運行 1w 次:

console.time('classnames');
range(10000).forEach(() => {
  classNames({ aa: true, bb: true, cc: false });
});
console.timeEnd('classnames'); 
//使用classnames, 1w次耗時: 12.334228515625ms

console.time('filter&join');
range(10000).forEach(() => {
  ['aa', true && 'bb', false && 'cc'].filter(Boolean).join(' ');
});
console.timeEnd('filter&join'); 
//使用filter和join, 1w次耗時: 9.76123046875ms

console.time('join');
range(10000).forEach(() => {
  ['aa', true && 'bb', false && 'cc'].join(' ');
});
console.timeEnd('join'); 
//僅使用join, 1w次耗時: 7.62060546875ms

如注釋, 性能基本無區別, 使用 join(' ') 略好一些, 但是都可以忽略不計.

最后

# 記得移除此庫 :)
$ yarn remove classnames
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,627評論 1 45
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數據類型 5種簡單數據類型:Unde...
    RickCole閱讀 5,149評論 0 21
  • 概要 64學時 3.5學分 章節安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,285評論 0 3
  • Swift1> Swift和OC的區別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,135評論 1 32
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,268評論 0 4