7.2行内样式
最后更新于：2022-04-02 05:40:31
## 前言
在之前的前端工程中，建议按照文件类型去区分，不过这样并不好区分，对于项目的维护并没有多大好处，好的代码建议将所有相关的代码维护在一起。
因此行内样式是被建议的方式。
## 语法
语法是将样式按照对象的格式定义为变量，然后在样式中直接使用这个样式对象。
```
var style = {
color:'red',
}
const Button = () =>
```
### 体验下样式变量
我们在开发的需求中，有些是希望样式根据变量动态变化的，如果是使用行内样式，这部分会非常容易实现。比如根据输入的字号控制文本框的文字大小。
```
class Input extends Component {
constructor(props){
super(props);
this.state = {
fontSize:12
} ;
this.handleChange = this.handleChange.bind(this);
}
handleChange({target}){
this.setState({
fontSize:target.value,
})
}
render(){
return ()
}
}
```
## 局限
- 无法实现动画特性
如果你希望使用类似的特性，你需要写好样式，然后直接控制class。同理，也不适合写一些媒体查询的样式。
- 不方便调试
因为其最终样式会直接渲染，不方便我们直接调试，也不适合代码复用。
- 页面文件会因此过大
过多的行内样式会导致页面文件过大，影响性能；也因为这点，可能会导致样式文件无法被缓存优化。
- 无法针对某些样式代码进行复用
';