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之类的，可以直接加载它写好的样式。