react入门到进阶（三）
一、react样式
1、内联样式
在以前写html+css的时候，引入css的时候有一种方法就是内联，而在react中又有些不一样，样式是用变量的形式，如下
const styleComponentHeader ={
header: {
backgroundColor:'#333333',
color:'#ffffff',
'padding-top':'15px',
paddingBottom:'15px',
fontSize:'15px'
}
//还可以定义其他样式
}
<h1 style={styleComponentHeader.header}>yondu is a good father</h1>
我们用参照json的方式定义了一个样式，这个只能定义在render里面，然后直接使用它，当然header后面还可以继续定义其他样式，而且和css写法不同的是，名字要用驼峰命名法，或者你就用引号把名字包起来，而后面的值则必须要用引号包起来。这种方式最后呈现的状态是把样式直接写入了标签里面，这样定义的东西不会影响全局，只对自己负责不会污染其他的。
另一种方法是我们直接创立一个css文件，这种就直接像以前那种写法了,只不过你在标签里面加类名的时候，要用className，例如<h1 className="smallFontSize">yondu is a good father</h1>,这种方式由于是全局的，所以有时候容易造成污染，你都不知道怎么回事，样式就冲突了，慎用。
总结几点：
- css命名规范 模块__属性名字--样式设定
- 定义只能在
render里面 - 注意样式的驼峰命名
- 类名要用
className - 动画，伪类不能使用
- react-native就是用这种方法
2、内联样式中的表达式
当我们有时候，想要动态的去改变样式的时候，会用到js，但在react中，我们也可以，这就要用到前面所提到的三元表达式了。
constructor(){
super();
this.state = {
miniH : false
};
}
changeHeader(){
this.setState({
miniH : !this.state.miniH
});
}
render(){
const styleHello = {
header: {
backgroundColor:'#333333',
color:'#ffffff',
paddingTop:(this.state.miniH) ? '3px' : '15px',
paddingBottom:(this.state.miniH) ? '3px' : '15px',
}
}
return(
<div>
<h1 style={styleHello.header} onClick={this.changeHeader.bind(this)} >hello world</h1>
<p>子页面输入<input type="text" onChange={this.props.childchange} /></p>
//当子组件输入框发生变化时，给在父组件的属性childchange传递了一个参数
</div>
)
}
我们首先给我们要改变的元素给了一个点击事件，这个事件只改变一个变量的布尔值，但是我们正是通过这个布尔值，就可以在样式里面使用三元表达式从而到达改变样式值的效果，而且这种改变，仅仅是state的改变，不会刷新整个页面，很高效。
3、CSS模块化
下面，我们来说说react样式里面极为重要的一点，就是css的模块化。为了保证一个模块的样式不影响其他模块，也就是不造成全局的污染，而且能使css按需加载的话，我们就要用到css的模块化。
首先，我们先装2个插件来处理模块化
"style-loader": "^0.13.1",
"css-loader": "^0.25.0"
然后在webpack.config.js文件里面配置一些东西，这是一种命名算法，会给你要引用这个css的类给予特殊的类名，这样就不会导致命名混乱的问题。
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
接着，我们创立一个css文件，随便命名为block.js吧，然后在里面写一些样式
.style {
background-color:#333333;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
fontSize:15px;
}
我们还要在需要这个css文件的js文件里面，把它引用进来
var blockCss = require("../../css/block.css");
这样，我们就可以直接使用这个css了
<p className={blockCss.style}>
这样使用，就可以确保你在css里面的东西不会污染全局，它只对引用自己的元素负责。而且，这样写的模块css是能够共享的，也省略了很多代码。下面，我们总结一下css模块化的东西
- 所有样式都是local 的，解决了命名冲突和全局污染
- 类名都是由算法生成的，可以来压缩类名
- 只需引用组件的
js，就可以搞定组件所有的js和css - 仍然是用
css的写法，没有任何负担
顺便说一下，有时候你如果不太关注与美工，想要把主要精力全部集中于逻辑层的处理，但是你做的东西又不能太难看，所以你就需要一些样式框架，例如bootstrap、ant design之类的，可以直接加载它写好的样式。
