1. React.Component
最常見的验夯，包含最常用的render(),componentDidMount(),shouldComponentUpdate…
shouldComponentUpdate(nextProps, nextState)
判斷 React 組件的輸出是否受當(dāng)前 state 或 props 更改的影響猖吴。意思就是只要組件的 props 或者 state 發(fā)生了變化，就會(huì)重新構(gòu)建 virtual DOM挥转，然后使用 diff算法進(jìn)行比較海蔽，再接著根據(jù)比較結(jié)果決定是否重新渲染整個(gè)組件。shouldComponentUpdate函數(shù)是重渲染時(shí)render()函數(shù)調(diào)用前被調(diào)用的函數(shù)绑谣，它接受兩個(gè)參數(shù)：nextProps和nextState党窜，分別表示下一個(gè)props和下一個(gè)state的值。并且借宵，當(dāng)函數(shù)返回false時(shí)候幌衣，阻止接下來的render()函數(shù)的調(diào)用，阻止組件重渲染壤玫，而返回true時(shí)豁护，組件照常重渲染。
React.Component 并未實(shí)現(xiàn) shouldComponentUpdate()欲间，如何利用shouldComponentUpdate鉤子函數(shù)優(yōu)化react性能
demo1.tsx
import React, { PureComponent,Component } from 'react';
class CompareComponent extends Component<any, any>{
state = {
isShow: false,
count:1
}
shouldComponentUpdate(nextProps, nextState){
if(nextState.isShow===this.state.isShow){
return false // false則不會(huì)調(diào)用render
}
return true
}
changeState = () => {
this.setState({
isShow: true
})
};
handleAdd=()=>{
const {count} = this.state
this.setState({
count:count+1
})
}
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>點(diǎn)擊賦值</button>
<div>{this.state.isShow.toString()}</div>
<button onClick={this.handleAdd}>點(diǎn)擊{this.state.count}</button>
</div>
);
}
}
export default CompareComponent
2.React.PureComponent
React.PureComponent 與 React.Component 幾乎完全相同楚里，也包括render,生命周期等等。但 React.PureComponent 通過props和state的淺對(duì)比來實(shí)現(xiàn) shouldComponentUpate()括改。如果對(duì)象包含復(fù)雜的數(shù)據(jù)結(jié)構(gòu)腻豌，它可能會(huì)因深層的數(shù)據(jù)不一致而產(chǎn)生錯(cuò)誤的否定判斷(表現(xiàn)為對(duì)象深層的數(shù)據(jù)已改變視圖卻沒有更新
React.PureComponent在某些條件下家坎，render不用重新渲染
PureComponent中不能有shouldComponentUpdate
demo2.tsx
import React, { PureComponent,Component } from 'react';
class CompareComponent extends PureComponent{
state = {
isShow: false,
count:1
}
changeState = () => {
this.setState({
isShow: true
})
};
handleAdd=()=>{
const {count} = this.state
this.setState({
count:count+1
})
}
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>點(diǎn)擊賦值</button>
<div>{this.state.isShow.toString()}</div>
<button onClick={this.handleAdd}>點(diǎn)擊{this.state.count}</button>
</div>
);
}
}
export default CompareComponent
3.React.FC
React.FC<>的在typescript使用的一個(gè)泛型,FC就是FunctionComponent的縮寫，是函數(shù)組件吝梅，這個(gè)泛型里面可以使用useState
這個(gè)里面無生命周期虱疏。
通過useState可以實(shí)現(xiàn)在函數(shù)組件中實(shí)現(xiàn)值的更新
useState在前兩者中不能使用，只能在函數(shù)組件或者泛型里面使用苏携。
具體如何使用做瞪，可參考這篇文章
import React, { useState } from 'react';
export interface NoticeProps {
name: string;
address: string
}
const Notice: React.FC<NoticeProps> = (props) => {
const [ name, setName ] = useState('angle');
const [ count, setCount ] = useState(1);
const addCount=()=>{
setCount(count+1)
}
console.log(count)
return <div>
<p>我是message頁(yè)面,name是：{name}</p>
<p>我是message頁(yè)面,count是：{count}</p>
<button onClick={() => setName('jane')}>點(diǎn)擊我改變name</button>
<br />
<button onClick={addCount}>點(diǎn)擊我改變count</button>
</div>;
}
export default Notice;
