兩種組件的聲明方式，都可以創(chuàng)建React組件
import React,{Component,PureComponent} from 'react'
class A extends Component{
//....
}
class B extends PureComponent{
//...
}
區(qū)別：
兩種聲明組件的方式區(qū)別不大缀旁，最主要的區(qū)別就是shouldComponentUpdate鉤子函數(shù)是否可以使用
- Component組件內(nèi)丸边， 當(dāng)props或state發(fā)生變化時(shí)吕漂， 會(huì)取決于shouldComponentUpdate()函數(shù)返回的值 來(lái)決定是否會(huì)重新渲染組件背镇，true渲染 false不渲染,殿较。當(dāng)父組件的state或props更新時(shí)规婆，無(wú)論子組件的props和state是否更新 都會(huì)重新渲染子組件澜躺， 這樣會(huì)有性能消耗。
- PureComponent組件內(nèi)抒蚜，不可使用shouldComponentUpdate鉤子函數(shù)掘鄙，組件是否重新渲染會(huì)自動(dòng)判斷props和state是否發(fā)生變化， 淺比較：對(duì)于引用類型的數(shù)據(jù)嗡髓，只比較變量的地址是否改變操漠。對(duì)比之后 沒(méi)有變化不渲染。
下面寫(xiě)一個(gè)例子來(lái)實(shí)踐一下
import React, { PureComponent } from 'react';
class AddModal extends PureComponent<IProps, State> {
state = {
arr: [1,2,3,4,5],
};
handleClick = () => {
const { arr } = this.state
arr.pop();
this.setState({
arr,
})
}
render(){
const { arr } = this.state
return <div>
<button onClick={this.handleClick}>click</button>
<p>arr</p>
</div>
}
// 頁(yè)面最初展示的是 12345
// 當(dāng)我們點(diǎn)擊按鈕之后 頁(yè)面并沒(méi)有變化 展示的還是12345
}
- Component
import React from 'react';
class AddModal extends React.Component<IProps, State> {
state = {
arr: [1,2,3,4,5],
};
handleClick = () => {
const { arr } = this.state
arr.pop();
this.setState({
arr,
})
}
render(){
const { arr } = this.state
return <div>
<button onClick={this.handleClick}>click</button>
<p>arr</p>
</div>
}
// 頁(yè)面最初展示的是 12345
// 當(dāng)我們點(diǎn)擊按鈕之后 頁(yè)面發(fā)生變化 展示的是1234
}
