本篇內(nèi)容主要講解“react如何讓子組件不渲染”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“react如何讓子組件不渲染”吧!

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的恒山網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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 (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

//PureComponent

//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent，自動(dòng)比較組件數(shù)據(jù)是否改變，注意只能比較一層，比如一個(gè)對象，對象中的屬性改變，他不會(huì)重新渲染，只有對象改變，才重新渲染。
class Foo extends PureComponent {
  render() {
    console.log("組件渲染");
    return null
  }
}
 
class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

//hooks 獨(dú)有優(yōu)化方式memo

//引入memo
import React, { Component, Fragment,  memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
  console.log("組件渲染");
  return 
count:{props.count}
})
 
class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      
        
         { this.setState(() => ({ count:this.state.count+1 })) }}>加count
         { this.setState(() => ({ name: this.state.count+1 })) }}>加name
      
 
    )
  }
}

到此，相信大家對“react如何讓子組件不渲染”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！