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。同理,也不适合写一些媒体查询的样式。 - 不方便调试 因为其最终样式会直接渲染,不方便我们直接调试,也不适合代码复用。 - 页面文件会因此过大 过多的行内样式会导致页面文件过大,影响性能;也因为这点,可能会导致样式文件无法被缓存优化。 - 无法针对某些样式代码进行复用
';