我們或許不需要 classnames 這個庫

超級大柱子發表於2019-04-17

專案許多庫都不是必要的, 我們一個個移除, 今天先移除 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
複製程式碼

相關文章