目錄：

1. 類元件有自己的狀態
2. 繼承React.Component-會有生命週期和this
3. 內部需要一個render函式（類元件會預設呼叫render方法，但不會預設新增，需要手動填寫render函式，並return一個能渲染的值。）
4. 類元件的基本架構
5. constructor裡邊新增自己的屬性和狀態、方法
  a. 寫了constructor就要寫super
  b. 如果c裡邊沒內容只有super，name可以不寫
6. 新增狀態this.state = {}; es7寫法state = {}。非雙向繫結
7. setState接收物件的情況、批量更新
8. setState接收函式的情況、state與penddingState
9. class裡方法的寫法
  a. 方法裡邊this的指向undefined的情況
  class Person {
    fn(){
      console.log(this);
    }
  }
  var person = new Person();
  var fn1 = person.fn;
  fn1(); //undefined
  b. bind改變this指向
  c. 箭頭函式繼承this指向
  d. 匿名函式傳參
10. TodoList實戰
11. 類元件注意：
注意繫結事件時，"on"後邊事件名的首字母大寫，如"change"要寫成"Change"注意回撥函式內部this的指向預設為undefined，要改變this指向
不能直接改變state的值、需要用函式setState來修改state的值

類元件：

做複雜的資料處理、需要有自己的狀態的時候，需要用類元件。

他有自己的生命週期也有react給他提供的一些內建函式方法。有自己的this和狀態。

要點：

• 類的名字就是元件的名字
• 類的開頭一定要大寫
• 類要繼承自React.Component
• 元件內部一定要有render函式，否則報錯

定義一個元件：

 1 import React from 'react'
 2 
 3 class TodoList extends React.Component {
 4     render(){
 5         let todoList = <div>
 6                 <h3>我是類元件</h3>
 7             </div>
 8         return todoList; 
 9         // 所以類元件內部必須有render函式，並return返回一個可渲染的值。
10     };
11 }
12 
13 export default TodoList

引入元件：

import TodoList from '../components/TodoList'

呼叫元件：

<TodoList></TodoList>

類元件內部沒有render函式報錯：

因為看到class元件會預設呼叫render方法
如果看到函式元件，會自動在函式內部新增一個render方法，把函式的return返回值放到render中執行。
所以類元件內部必須有render函式，並return返回一個可渲染的值。不會進行自動新增。

開發1個類元件 - TodoList：

元件內部要使用的資料稱之為狀態state。

1、準備一個模組，並做初步資料渲染嘗試：

2、填寫資料並執行新增功能，將input內容新增到list
（沒有vue的雙向資料繫結功能，只是單向的。應該知道input的內容，然後把值設定給state資料，再把state資料放到list列表中渲染。）

2-1、需要onChange事件監聽input輸入。回撥函式=類裡邊定義的函式。
注意"on"後邊事件名的首字母大寫，如"change"要寫成"Change"

=== 

2-2、onChange後給state裡的inputVal賦值
注意回撥函式內部this的指向：預設，this指向undefined

因為只是監聽change事件的時候，呼叫handleChange函式，這個函式沒人呼叫，就會指向undefined。
跟下邊這段程式碼一樣：

改變this指向：通過繫結

onChange= { this.handleChange.bind(this) }

 不能直接改變state的值，會有警告：

// this.state.inputVal = e.target.value;

需要用函式setState來修改state的值

this.setState({
    inputVal: e.target.value
})

最終程式碼：

2-3、新增功能
注意this繫結、空值的防抖判斷等。

3、刪除功能

改變this指向的其他方法：

1、bind繫結

this.handleDelete.bind(this,i)

沒點選一次就執行了多少次的函式。

2、頂部繫結

onChange= { this.handleChange }

3、箭頭函式改變this指向【重點、核心方案】

onChange= { this.handleChange }

4、匿名函式【要傳參的情況】
在匿名函式內部讓函式去執行

一個函式裡有多個setState：

setState裡邊傳入物件，會有引數覆蓋的情況。上圖示例中只執行最後一個。

批量更新：

在一個函式裡有多個setState的情況下，react就會把多個setState放到一起，進行合併。合併完了以後再去執行。那麼就只剩下最後一個會起作用了。

目的/好處：

減少虛擬dom的比對，提高渲染的效能。

setState接收函式的情況：setState純函式

就想設定多個setState還想繞過批量更新，就可以在setState函式裡傳參函式：

return的物件裡邊是你要更改的狀態。

流程是先進行更改，更改的內容放在pendingState中進行等待。函式完畢後再把pendingState的內容一次性再設定給state裡。

2019-12-09 00:2