## 前言 在之前的前端工程中，建议按照文件类型去区分，不过这样并不好区分，对于项目的维护并没有多大好处，好的代码建议将所有相关的代码维护在一起。 因此行内样式是被建议的方式。 ## 语法 语法是将样式按照对象的格式定义为变量，然后在样式中直接使用这个样式对象。 ``` var style = { color:'red', } const Button = () => <button style={style}> Click me !</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 (<input onChange={this.handleChange} style={fontSize:this.state.fontSize}/>) } } ``` ## 局限 - 无法实现动画特性 如果你希望使用类似的特性，你需要写好样式，然后直接控制class。同理，也不适合写一些媒体查询的样式。 - 不方便调试 因为其最终样式会直接渲染，不方便我们直接调试，也不适合代码复用。 - 页面文件会因此过大 过多的行内样式会导致页面文件过大，影响性能；也因为这点，可能会导致样式文件无法被缓存优化。 - 无法针对某些样式代码进行复用