React - 組件：類組件

目錄：

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函數，否則報錯

定義一個組件：

import React from 'react'

class TodoList extends React.Component {
    render(){
        let todoList = <div>
                <h3>我是類組件</h3>
            </div>
        return todoList; 
        // 所以類組件內部必須有render函數，並return返回一個可渲染的值。
    };
}

export default TodoList

 

引入組件：

import TodoList from '../components/TodoList'

 

調用組件：

<TodoList></TodoList>

類組件內部沒有render函數報錯：

因為看到class組件會默認調用render方法
如果看到函數組件，會自動在函數內部添加一個render方法，把函數的return返回值放到render中運行。
所以類組件內部必須有render函數，並return返回一個可渲染的值。不會進行自動添加。

 

開發1個類組件 - TodoList：

組件內部要使用的數據稱之為狀態state。
state的值一定是對象，並且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:24:02