咱們或許不須要 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
複製代碼