以下代碼，沒有使用模塊化的方式，使用的是CDN的方式。如果需要源代碼，請從這個地址下載：
```text
鏈接：https://pan.baidu.com/s/1s57mr5AE_ecWBFZ5TJTwqw 提取碼：f7x2
```
另外，這篇文章，主要是剖析**組件的初次渲染和重新渲染**。所以，其它部分不要太較勁。
### **一、react類組件和函數式組件重新渲染時的區別**
### **1、看現象：**
### **1）代碼（demo01）**
**類組件：**
```js
// 1、類組件
class ComClass extends React.Component {
constructor(props) {
super();
this.props = props;
console.log("類組件的構造函數被調用了");
}
render() {
console.log("類組件的render被調用了");
return (
<div style={{ "backgroundColor": "pink" }}>
<h5 >我是類組件</h5>
<p>{this.props.name}</p>
</div>
);
}
}
```
**函數式組件：**
```js
// 2、函數式組件
function ComFn(props) {
console.log("函數式組件的函數被調用了");
return (
<div style={{ "backgroundColor": "skyblue" }}>
<h5 >我是函數式組件</h5>
<p>{props.name}</p>
</div>
);
}
```
**使用組件：**
```js
let name = "張三瘋";
function changeName() {
name = "張四瘋"
renderDom();
}
function renderDom() {
ReactDOM.render(
<div>
<button onClick={changeName} >修改</button>
<ComClass name={name} /><br />
<ComFn name={name} />
</div>, document.getElementById("box"));
}
renderDom();
```
### **2）運行：**
2.1）初次運行時，我們發現在控制臺中打印的內容為：
```js
類組件的構造函數被調用了
類組件的render被調用了
函數式組件的函數被調用了
```
2.2）當點擊“修改”按鈕時，我們發現控制臺中打印的內容為：
```js
類組件的render被調用了
函數式組件的函數被調用了
```
### **3）總結（敲黑板，重點）：**
1、類組件重新渲染時，只調用了render
2、函數式組件重新渲染時，會調用函數整個本身（哈哈，不調用它也不行啊）
### **2、看原理：**
### **1）用原生的方式剖析：**
函數式組件的剖析：
```js
標簽的方式使用函數式組件：
<ComFn name={name} />
基本上等價于：
{ComFn({name})} //組件的方式使用，就是在調用函數
```
類組件的剖析：
```js
標簽的方式使用類組件：
<ComClass name={name} /><br/>
等價于
{new ComClass({name}).render()}
但是
這樣改了后，初次渲染沒有問題。當點擊了“修改”按鈕時，不一樣了。
所以，類組件里，應該是把new ComClass({name})實例化出來的對象，記錄起來了。所以，應該等價于
1、定義一個對象，保存了new ComClass({name})
//在react里對類組件對象進行了保存。
let comObj = new {new ComClass({name});
2、在渲染時，只是調用了類組件的render函數。
comObj.render();
```
即：最終代碼變成了如下：
### **2）代碼（demo02）：**
類組件和函數式組件的代碼不用改變。
**使用組件**
```js
let name = "張三瘋";
//此處保存了類組件的實例化對象（這個只是模擬實現，react內部并不是這么簡單）
let comObj = new ComClass({name});
function changeName(){
name = "張四瘋";
comObj.props = {name}
renderDom();
}
function renderDom(){
ReactDOM.render(
<div>
<button onClick={changeName} >修改數據</button>
{/*此處用原生的方式使用組件*/}
{comObj.render()}
{ComFn({name})}
</div>, document.getElementById("box"));
}
renderDom();
```
### **3）運行：**
3.1）、初次運行時，我們發現在控制臺中打印的內容為：
```js
類組件的構造函數被調用了
類組件的render被調用了
函數式組件的函數被調用了
```
3.2）、當點擊“修改”按鈕時，我們發現控制臺中打印的內容為：
```js
類組件的render被調用了
函數式組件的函數被調用了
```
> 運行結果和組件的方式一樣。
### **二、看看組件里使用定時器，并且，重新渲染組件**
### **1、看現象**
### **1）代碼（demo03）：**
**類組件：**
```js
// 1、類組件
class ComClass extends React.Component {
constructor(props) {
super();
this.props = props;
console.log("類組件的構造函數被調用了");
}
showMessage = () => {
//在顯示props時（通過this訪問props），props里的內容被改變了。
console.log('類組件: ' + this.props.name);
};
handleClick = () => {
// 分析問題：
// 1、3秒鐘后調用函數（通過 this 的方式調用）
setTimeout(this.showMessage, 3000);
};
render() {
console.log("類組件的render被調用了");
return (
<div style={{ "backgroundColor": "pink" }}>
<h5 >我是類組件</h5>
<p>name：{this.props.name}</p>
<input type="button" value="調用帶著定時器的函數" onClick={this.handleClick} />
</div>
);
}
}
```
**函數式組件：**
```js
// 2、函數式組件
function ComFn(props) {
console.log("函數式組件的函數被調用了");
//這個是閉包：
// 每調用一次父函數（ComFn），都會重新定義一個新的子函數。新的函數中保存著父函數新的形參
const showMessage = () => {
console.log('函數式組件: ' + props.name);
};
//這個是閉包：
//每調用一次父函數（ComFn），都會重新定義一個新的子函數。新的函數中保存著父函數新的形參
const handleClick = () => {
setTimeout(showMessage, 3000);
};
return (
<div style={{ "backgroundColor": "skyblue" }}>
<h5 >我是函數式組件</h5>
<p>name：{props.name}</p>
{/*先點擊這個按鈕，調用，第一次定義的 showMessage和handleClick*/}
<input type="button" value="調用帶著定時器的函數" onClick={handleClick} />
</div>
);
}
```
**使用組件：**
```js
let name = "張三瘋";
function changeName() {
name = "張四瘋"
renderDom();
}
function renderDom() {
ReactDOM.render(
<div>
<button onClick={changeName} >修改</button>
<ComClass name={name} /><br />
<ComFn name={name} />
</div>, document.getElementById("box"));
}
renderDom();
```
### **2）、運行：**
**2.1）類組件：**
點擊類組件的“調用帶著定時器的函數” 按鈕后，再點擊”修改“按鈕（**注意先后順序**）。我們發現了：界面上打印的和控制臺打印的是**一樣的**。這是**不對的**：因為，我點擊“調用帶著定時器的函數” 按鈕時，name的值是”張三瘋“，應該打印”張三瘋“
**2.2）函數式組件：**
點擊類組件的“調用帶著定時器的函數” 按鈕后，再點擊”修改“按鈕（**注意先后順序**）。我們發現了：界面上打印的和控制臺里打印的**不一樣**，這是**對的**：因為，我點擊“調用帶著定時器的函數” 按鈕時，name的值是”張三瘋“，應該打印”張三瘋“
### **3）總結**
原因何在？以下文字要細細的品，如果品不出來，就結合上面的代碼，再看看。
類組件：
當**類組件重新渲染**時，**只調用了render函數**。組件的this不變。等定時器到了時，讀取屬性的的值時，先通過this找到props。再通過props找到name。而此時，name的值，已經發生了變化。所以，自然讀到的是新值“張四瘋” ，這個應該好理解。
函數式組件：
（你必須對閉包是清楚的），當**函數式組件重新渲染**時，**調用了函數**（組件），那么在函數式組件里的 函數（showMessage，handleClick）就會被重新定義，新定義的函數保存著父函數（組件）的新的形參和局部變量。而我們點擊“調用帶著定時器的函數”時，調用的是 第一次定義的showMessage，handleClick（這兩個函數里保存了父函數（組件）第一次傳入的形參和局部變量）。
其實，上面的代碼中，已經做了注釋。我再次解釋后，如果不明白的話，看看下面的剖析原理的代碼。
### **2、看原理：**
### **1）用原生的方式剖析**
與第一大點的第二小點的“剖析原理”一樣：
函數式組件的剖析：
```js
標簽的方式使用函數式組件：
<ComFn name={name} />
基本上等價于：
{ComFn({name})} //組件的方式使用，就是在調用函數
```
類組件的剖析：
```js
把new ComClass({name})實例化出來的對象，記錄起來了。
1、定義一個對象，保存了new ComClass({name})
//在react里對類組件對象進行了保存。
let comObj = new {new ComClass({name});
2、在渲染時，只是調用了類組件的render函數。
comObj.render();
```
### **2）代碼（demo04）：**
類組件和函數式組件的代碼不用變(同第二大點的第一小點：組件里使用定時器，并重新渲染組件)。
**使用組件：**
這個代碼等同于第一大點的第二小點。
```js
let name = "張三瘋";
let comObj = new ComClass({ name });
function changeName() {
name = "張四瘋";
comObj.props = { name }
renderDom();
}
function renderDom() {
ReactDOM.render(
<div>
<button onClick={changeName} >修改</button>
{comObj.render()}
{ComFn({name})}
</div>, document.getElementById("box"));
}
renderDom();
```
### **三、為什么react現在更推薦函數式組件**
React的核心理念之一就是，**界面應當是數據的不同形式的簡單投影**。**相同的輸入應該產生相同的輸出**。而函數式組件的寫法，使用閉包的特性，顯然符合這一理念：每個閉包里保存在父函數的當前形參（props）和局部變量。而類組件里，由于，每次讀取數據，要根據this指針去讀取，那必然不會讀取到屬于自己當前狀態的值。而是更新后的最新的值。
### **四、補充：類組件如何解決以上問題呢：**
其實還是利用了閉包。
### **看類組件的代碼修改（demo05）：**
```js
//修改類組件里的showMessage 和 handleClick 函數。
showMessage = (name) => {
console.log('類組件: ' + name);
};
handleClick = () => {
let name = this.props.name;
//此處：
//1 、()=>this.showMessage(name)是閉包。父函數是handleClick，
//2、閉包會把當前的局部變量name持有，然后，調用 showMessage(name)時，把name的值傳入showMessge里
setTimeout(()=>this.showMessage(name), 3000);
};
```
### **五、類組件和函數式組件區別：**
在react的模式和開發思維上，函數組件和類組件還是有區別的。
1、各自的特點：
1）類的組件主要是面向對象編程，是建立在繼承之上，它的生命周期等核心概念的特點 2）函數組件主要是函數式編程，無副作用，并且在引用的時候透明的特點
2、使用場景：
因為兩者主打的特點不一樣，所以在使用場景上自然就存在一些差異了： 如果組件依賴生命周期，并且它的設計上需要繼承的特性，我們在選擇上更傾向類組件會更合適一點
由于HOOK的推出，逐漸降低了生命周期的概念，那么函數組件可以更好的取代類組件的開發，而且官方也推崇“組合優于繼承”的思想，所以類組件的優勢也在慢慢的淡出。更多關于web培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。
京公網安備 11010802030320號