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

使用 classNames 的情況:

import classNames from 'classnames';

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

如果不使用classNames:

根據(jù)條件組合樣式

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

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

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

// css
.false {}

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

方案2, 僅使用字符串

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

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

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

方案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 更短

這個方案不太推薦, 因?yàn)檫m應(yīng)性不強(qiáng)

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})} />
}

性能如何?

運(yùn)行 1w 次:

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

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

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

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

最后

# 記得移除此庫 :)
$ yarn remove classnames