styled-components V4版本是一个变化相当大的版本，底层和API都有很大的变化，之前的部分API被舍弃，从而被其他API所取代。
新版本的主要特性：
- 文件更小，速度更快。文件大小从 16.1KB 缩小到不足 15KB（取决于你的捆绑器和 babel 插件的使用）。在速度方面，加载速速提升约 25％，重新渲染速度提升约 7.5％；
- 全新的 createGlobalStyle API，支持重新热重载和主题化，用于替换 injectGlobal；
- 支持“as” prop，更加灵活；
- 移除 Comp.extend，可使用自动 codemod 将整个代码库移动到统一的 styled(Comp) 表示;
- 与 React v16 完全兼容的 StrictMode，不得不放弃对 React v15 及更低版本的支持（可以通过 polyfill 在 React v15 中使用 styled-components v4）;
- 对于任何样式组件，原生支持 ref，不再需要 innerRef；
1.如何安装最新版本
npm install styled-components
2.使用React V16版本
npm install react@^16.3 react-dom@^16.3
3.styled(StyledComponent)取代.extend
之前的写法
import styled from 'styled-components'
const Component = styled.div`
background: blue;
color: red;
`
const ExtendedComponent = Component.extend`
color: green;
`
现在的写法
import styled from 'styled-components'
const Component = styled.div`
background: blue;
color: red;
`
const ExtendedComponent = styled(Component)`
color: green;
`
4. createGlobalStyle 取代 injectGlobal
createGlobalStyle可以动态更新、重新热加载和基于上下文主题化你的全局样式
旧的写法
import { injectGlobal } from 'styled-components'
injectGlobal`
body {
color: red;
}
`
新的写法
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
5.ref 取代 innerRef
旧的写法
const Component = styled.div`
background: blue;
color: red;
`
// later in your render method
<Component innerRef={element => { this.myElement = element }}>Something something</Component>
新的写法
const Component = styled.div`
background: blue;
color: red;
`
// later in your render method
<Component ref={element => { this.myElement = element }}>Something something</Component>
6.keyframes写法变化
旧的写法
import styled, { keyframes } from 'styled-components'
const animation = keyframes`
0% {
opacity: 0;
}
100 {
opacity: 1;
}
`
const animationRule = `
${animation} 1s infinite alternate
`
const Component = styled.div`
animation: ${animationRule};
`
新的写法
import styled, { css, keyframes } from 'styled-components'
const animation = keyframes`
0% {
opacity: 0;
}
100 {
opacity: 1;
}
`
const animationRule = css`
${animation} 1s infinite alternate;
`
const Component = styled.div`
animation: ${animationRule};
`
7.attrs(props => ({}))取代attrs({})
如果您正在使用attrs（），并且传递给它的一些属性是一个函数，则建议切换到新的attrs（props=>（）语法，以便更容易、更强大地组合。
旧的写法
import styled from 'styled-components'
const Input = styled.input.attrs({
type: ({ inputType }) => inputType
})`
background: blue;
color: red;
`
新的写法
import styled from 'styled-components'
const Input = styled.input.attrs(({ inputType }) => ({
type: inputType
}))`
background: blue;
color: red;
`
8.新版本中的"as"
新版本中的“as”可以将不同的HTML标签渲染成相同的样式，例如，在导航栏中，有链接，也有按钮，可以使用as渲染，保持样式一致。
import styled from "styled-components";
const Component = styled.div`
color: red;
`;
render(
<Component
as="button"
onClick={() => alert('It works!')}
>
Hello World!
</Component>
)
9.参考文档
syled-components官网
styled-components v4测试版发布：原生支持 ref，性能提升25%
网友评论