首頁  >  文章  >  web前端  >  react要怎麼讓子元件不渲染

react要怎麼讓子元件不渲染

藏色散人
藏色散人原創
2023-01-05 09:29:172278瀏覽

react讓子元件不渲染的方法:1、透過「shouldComponentUpdate(nextProps,nextState){...}」實作父元件渲染,子元件不渲染;2、透過「PureComponent」方式讓子元件不渲染;3、引入memo,用memo把hooks包裹即可。

react要怎麼讓子元件不渲染

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼讓子元件不渲染?

React 父元件重新渲染,子元件不需要渲染的三種效能最佳化方式(PureComponent,memo,shouldComponentUpdate);

//使用React普通函數時,可以使用兩種最佳化方式,PureComponent和shouldComponentUpdate

//shouldComponentUpdate

//shouldComponentUpdate
class Foo extends Component {
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.count===this.props.count){ //传入的count与组件当前props的count比较,count没改变,return false,不渲染
      return false    //不渲染
    }
    return true;  //渲染
  }
  render() {
    console.log("组件渲染");  //可以看到,当父组件的name改变时,子组件不会打印,只有count改变,才会打印,优化性能
    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 &#39;react&#39;;
//PureComponent,自动比较组件数据是否改变,注意只能比较一层,比如一个对象,对象中的属性改变,他不会重新渲染,只有对象改变,才重新渲染。
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 獨有最佳化方式memo

//引入memo
import React, { Component, Fragment,  memo } from &#39;react&#39;;
//用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>
 
    )
  }
}

#學習:《react影片教學

以上是react要怎麼讓子元件不渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn