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之類的，可以直接載入它寫好的樣式。