Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menghalang subkomponen daripada dipaparkan dalam tindak balas

Bagaimana untuk menghalang subkomponen daripada dipaparkan dalam tindak balas

藏色散人
藏色散人asal
2023-01-05 09:29:172266semak imbas

Kaedah bertindak balas untuk menghalang komponen anak daripada dipaparkan: 1. Gunakan "shouldComponentUpdate(nextProps,nextState){...}" untuk mencapai pemaparan komponen induk dan komponen anak untuk tidak dipaparkan; halang komponen kanak-kanak daripada dipaparkan. Komponen tidak dipaparkan;

Bagaimana untuk menghalang subkomponen daripada dipaparkan dalam tindak balas

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menghalang komponen kanak-kanak daripada dipaparkan dalam tindak balas?

Tiga kaedah pengoptimuman prestasi (PureComponent, memo, shouldComponentUpdate) yang React komponen induk dipaparkan semula dan komponen anak tidak perlu diberikan

//Apabila menggunakan fungsi biasa React , anda boleh menggunakan Dua kaedah pengoptimuman, PureComponent dan 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 kaedah pengoptimuman unik

//引入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>
 
    )
  }
}

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menghalang subkomponen daripada dipaparkan dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn