react入門筆記3

1. 設置樣式

1. 使用普通的 style 樣式

   <h1 style={ {color: 'red', fontWeight: 200} }></h1>
   

2. 啓用 css-modules

   1. 修改 webpack.config.js這個配置文件，爲 css-loader 添加參數：

      { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 爲 .css 後綴名的樣式表  啓用 CSS 模塊化
      //固定參數modules，表示爲普通的css樣式表啓用模塊化
      

   2. 在需要的組件中，import導入樣式表，並接收模塊化的 CSS 樣式對象：

      import cssObj from '../css/CmtList.css' 
      

   3. 在需要的HTML標籤上，使用className指定模塊化的樣式：

      <h1 className={cssObj.title}>評論列表組件</h1>
      

3. 使用localIdentName自定義生成的類名格式，可選的參數有：

   • [path] 表示樣式表 相對於項目根目錄 所在路徑
   • [name] 表示 樣式表文件名稱
   • [local] 表示樣式的類名定義名稱
   • [hash:length] 表示32位的hash值
   • 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }
     

4. 使用 :local() 和 :global()

   • :local()包裹的類名，是被模塊化的類名，只能通過className={cssObj.類名}來使用

     同時，:local默認可以不寫，這樣，默認在樣式表中定義的類名，都是被模塊化的類名；

   • :global()包裹的類名，是全局生效的，不會被 css-modules 控制，定義的類名是什麼，就是使用定義的類名className="類名"

5. 注意：只有.title這樣的類樣式選擇器，纔會被模塊化控制，類似於body這樣的標籤選擇器，不會被模塊化控制；

在項目中啓用模塊化並同時使用bootstrap

1. 把 自己的樣式表，定義爲 .scss 文件

2. 第三方的 樣式表，還是 以 .css 結尾

3. 我們只需要爲自己的 .scss 文件，啓用模塊化即可；

4. 運行cnpm i sass-loader node-sass -D 安裝能夠解析scss文件的loader

5. 添加loader規則：

   { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包處理 scss 文件的 loader
   

2. React 中綁定事件的注意點

1. 事件的名稱都是React的提供的，因此名稱的首字母必須大寫onClick、onMouseOver

2. 爲事件提供的處理函數，必須是如下格式

   onClick= { function }
   

3. 用的最多的事件綁定形式爲：

   <button onClick={ () => this.show('傳參') }>按鈕</button>
   
   // 事件的處理函數，需要定義爲 一個箭頭函數，然後賦值給 函數名稱
   show = (arg1) => {
       console.log('show方法' + arg1)
   }
   

4. 在React中，如果想要修改 state 中的數據，推薦使用 this.setState({ })

   注意： this.setState({ })方法是異步的，如果在調用完之後想立即拿到最新的state值，需要在 this.setState({ },callback)方法的第二個參數回調函數裏取得最新的state值。

   show() {
   	this.setState({
   		msg : "oooooo"
   	},function () {
     		console.log(this.state.msg);
   	}) 
   }
   

3. 綁定文本框與state中的值（單向數據流）

1. 在 Vue 中，默認提供了v-model指令，可以很方便的實現 數據的雙向綁定；

2. 但是，在 React 中，默認只是單向數據流，也就是 只能把 state 上的數據綁定到 頁面，無法把 頁面中數據的變化，自動同步回 state ； 如果需要把 頁面上數據的變化，保存到 state，則需要程序員手動監聽onChange事件，拿到最新的數據，手動調用this.setState({ }) 更改回去；

3. 案例：

如果 我們只是把 文本框的 value 屬性，綁定到了 state 狀態，但是，如果不提供 onChagne 處理函數的話，得到的文本框，將會是一個只讀的文本框
當 爲 文本框綁定 value 值以後，要麼同時提供一個 readOnly， 要麼，提供一個 onChange 處理函數

<input type="text" name="" id="" value={this.state.msg}/>
//Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. 
//This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

綁定一個onChange方法後：

<input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={() => this.textChanged()} ref="mytxt" />

 // 響應 文本框 內容改變的處理函數
  txtChanged = (e) => {
 // 在 onChange 事件中，獲取 文本框的值，有兩種方案：
 // 方案1： 通過 事件參數 e 來獲取；
 // console.log(e.target.value);
  // 方案2： 通過 ref 獲取；
 // console.log(this.refs.txt.value)

 const newVal = e.target.value

 this.setState({
   msg: newVal
 })
}

4. 使用ref獲取DOM元素引用

和 Vue 中差不多，vue 爲頁面上的元素提供了 ref 的屬性，如果想要獲取 元素引用，則需要使用this.$refs.引用名稱

在 React 中，也有 ref, 如果要獲取元素的引用this.refs.引用名稱

5. 組件的生命週期

• 生命週期的概念：每個組件的實例，從 創建、到運行、直到銷燬，在這個過程中，會出發一些列 事件，這些事件就叫做組件的生命週期函數；

• React組件生命週期分爲三部分：

  • 組件創建階段：特點：一輩子只執行一次

  componentWillMount:
  render：
  componentDidMount:

  • 組件運行階段：按需，根據 props 屬性 或 state 狀態的改變，有選擇性的 執行 0 到多次

  componentWillReceiveProps:
  shouldComponentUpdate:
  componentWillUpdate:
  render:
  componentDidUpdate:

  • 組件銷燬階段：一輩子只執行一次

  componentWillUnmount:

defaultProps

在組件創建之前，會先初始化默認的props屬性，這是全局調用一次，嚴格地來說，這不是組件的生命週期的一部分。在組件被創建並加載候，首先調用 constructor 構造器中的 this.state = {}，來初始化組件的狀態。

React生命週期的回調函數總結成表格如下：

組件生命週期的執行順序：

1. Mounting：
   • constructor()
   • componentWillMount()
   • render()
   • componentDidMount()
2. Updating：
   • componentWillReceiveProps(nextProps)
   • shouldComponentUpdate(nextProps, nextState)
   • componentWillUpdate(nextProps, nextState)
   • render()
   • componentDidUpdate(prevProps, prevState)
3. Unmounting：
   • componentWillUnmount()