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函數，不然報錯

定義一個組件：

 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。
state的值必定是對象，而且state這個拼寫也是固定的： 

 

 

一、準備一個模塊，並作初步數據渲染嘗試：

 

二、填寫數據並執行添加功能，將input內容添加到list
（沒有vue的雙向數據綁定功能，只是單向的。應該知道input的內容，而後把值設置給state數據，再把state數據放到list列表中渲染。）

2-一、須要onChange事件監聽input輸入。回調函數=類裏邊定義的函數。
注意"on"後邊事件名的首字母大寫，如"change"要寫成"Change"

=== 

 

 

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-三、添加功能
注意this綁定、空值的防抖判斷等。

 

  

三、刪除功能

 

 

 

  

改變this指向的其餘方法：

一、bind綁定

this.handleDelete.bind(this,i)

沒點擊一次就執行了多少次的函數。

 

二、頂部綁定

onChange= { this.handleChange }

 

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

onChange= { this.handleChange }

 

四、匿名函數【要傳參的狀況】
在匿名函數內部讓函數去執行

 

 

一個函數裏有多個setState：

setState裏邊傳入對象，會有參數覆蓋的狀況。上圖示例中只執行最後一個。

批量更新：

在一個函數裏有多個setState的狀況下，react就會把多個setState放到一塊兒，進行合併。合併完了之後再去執行。那麼就只剩下最後一個會起做用了。

目的/好處：

減小虛擬dom的比對，提升渲染的性能。

 

setState接收函數的狀況：setState純函數

就想設置多個setState還想繞過批量更新，就能夠在setState函數裏傳參函數：

return的對象裏邊是你要更改的狀態。

 

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

 

 

 

 

 

 

 

 

2019-12-09 00:24:02