您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“react如何讓子組件不渲染”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“react如何讓子組件不渲染”吧!
react讓子組件不渲染的方法:1、通過“shouldComponentUpdate(nextProps,nextState){...}”實(shí)現(xiàn)父組件渲染,子組件不渲染;2、通過“PureComponent”方式讓子組件不渲染;3、引入memo,用memo把hooks包裹即可。
React 父組件重新渲染,子組件不需要渲染的三種性能優(yōu)化方式(PureComponent,memo,shouldComponentUpdate);
//使用React普通函數(shù)時(shí),可以使用兩種優(yōu)化方式,PureComponent和shouldComponentUpdate
//shouldComponentUpdate
//shouldComponentUpdate
class Foo extends Component {
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){ //傳入的count與組件當(dāng)前props的count比較,count沒改變,return false,不渲染
return false //不渲染
}
return true; //渲染
}
render() {
console.log("組件渲染"); //可以看到,當(dāng)父組件的name改變時(shí),子組件不會(huì)打印,只有count改變,才會(huì)打印,優(yōu)化性能
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}
//PureComponent
//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent,自動(dòng)比較組件數(shù)據(jù)是否改變,注意只能比較一層,比如一個(gè)對(duì)象,對(duì)象中的屬性改變,他不會(huì)重新渲染,只有對(duì)象改變,才重新渲染。
class Foo extends PureComponent {
render() {
console.log("組件渲染");
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}
//hooks 獨(dú)有優(yōu)化方式memo
//引入memo
import React, { Component, Fragment, memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
console.log("組件渲染");
return <div>count:{props.count}</div>
})
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}
到此,相信大家對(duì)“react如何讓子組件不渲染”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。