styled-components 背后的魔法

styled-components 定义组件的风格为

const Button = styled.button`
  background-color: papayawhip;
  border-radius: 3px;
  color: palevioletred;
`

这个Button变量现在是一个React组件，可以像其他React组件一样渲染！那么它是如果实现的？

模板字符串

事实证明，这个奇怪的 styled.button`` 符号实际上是 ES6中引入的一种名为 Tagged Template Literal（模板字符串） 的新功能。

从本质上讲， styled.button``和styled.button()都是调用一个函数，但当你传入参数以后，就会发现 我们不一样、不一样、不一样 ！

那么让我们创建一个简单的函数来看看哪里不一样：

const logArgs = (...args) => console.log(...args)

您可以在控制台中执行代码查看结果

logArgs('a', 'b')
// -> a b

logArgs``
// -> [""]

logArgs`I like pizza`
// -> ["I like pizza"]

显而易见，正常调用输出的是一个字符串，而以模板字符串的方式调用输出的是一个数组。

那当我们传入字符串插值以后会发生什么呢？

const favoriteFood = 'pizza'

logArgs(`I like ${favoriteFood}.`)
// -> I like pizza.


logArgs`I like ${favoriteFood}.`
// -> ["I like ", "."] "pizza"

 Amazing，我们得到了一个数组和一个字符串，第一个参数是被插值分割而生成的数组，第二个参数就是插值

 

那当我们传入函数时，又会怎样？

logArgs(`Test ${() => console.log('test')}`)
// -> Test () => console.log('test')

logArgs`Test ${() => console.log('test')}`
// -> ["Test", ""] () => console.log('test')

你应该猜到了第二行输出的是一个字符串，第五行是一个数组和一个真正的函数。

我们来验证一下

const execFuncArgs = (...args) => args.forEach(arg => {
  if (typeof arg === 'function') {
    arg()
  }
})

execFuncArgs('a', 'b')
// -> undefined

execFuncArgs(() => { console.log('this is a function') })
// -> "this is a function"

execFuncArgs('a', () => { console.log('another one') })
// -> "another one"


execFuncArgs(`Hi, ${() => { console.log('Executed!') }}`)
// -> undefined

execFuncArgs`Hi, ${() => { console.log('Executed!') }}`
// -> "Executed!"

应用场景

以 Button 大小为例

const Button = styled.button`
  font-size: ${props => props.primary ? '2em' : '1em'};
`

// font-size: 2em;
<Button primary />

// font-size: 1em;
<Button />

Refers

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
• https://mxstbr.blog/2016/11/styled-components-magic-explained/