综合技术

我们或许不需要 classnames 这个库

微信扫一扫,分享到朋友圈

我们或许不需要 classnames 这个库
0
import classNames from 'classnames';

export default ()=> {
  // className 的值: 'style-a style-b'
  return <div className={classNames('style-a', {'style-b':true, 'style-c':false})} />
}
复制代码

如果不使用classNames:

如果只是组合样式

export default ()=> {
  return <div className={['style-a', 'style-b'].join(' ')} />
}
复制代码

根据条件组合样式

export default ()=> {
  // className 的值: 'style-a style-b'
  return <div className={['style-a', true && 'style-b', false && 'style-c'].filter(Boolean).join(' ')} />
}
复制代码

有的童鞋会说, 参数太长了, 我们有以下两个方法解决:

  1. (推荐)我们保留false字符串, 声明一个空的 false 样式(为了减少浏览器查找样式的时间), 这样可以移除 filter(Boolean)
    步骤:
// css
.false {}
复制代码
export default ()=> {
  // className 的值: 'style-a style-b false'
  return <div className={['style-a', true && 'style-b', false && 'style-c'].join(' ')} />
}
复制代码
  1. 写成一个函数 names:
const names = (...args) => args.filter(Boolean).join(' ')

export default ()=> {
  return <div className={names('style-a', false && 'style-b', true && 'style-c')} />
}
复制代码

性能如何?

运行1w次:

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

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

console.time('不使用filter(Boolean)');
range(10000).forEach(() => {
  ['aa', true && 'bb', false && 'cc'].join(' ');
});
console.timeEnd('names'); // 7.62060546875ms
复制代码

如注释, 性能基本无区别, 并且都可以忽略不计.

阅读原文...

微信扫一扫,分享到朋友圈

我们或许不需要 classnames 这个库
0
稀土掘金

哈啰致信滴滴顺风车:垄断阻碍进步 一起促进良性竞争

上一篇

新版4.7寸iPhone 8明年3月发布 内部配置升级

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

我们或许不需要 classnames 这个库

长按储存图像,分享给朋友