Comment empêcher le rendu des sous-composants en réaction

Comment empêcher le rendu des composants enfants dans React : 1. Utilisez "shouldComponentUpdate(nextProps,nextState){...}" pour restituer le composant parent et les composants enfants ne seront pas rendus. 2. Utilisez la méthode "PureComponent" pour rendre le rendu des composants enfants. empêcher le rendu du composant enfant ; 3. Introduire le mémo et envelopper les crochets avec le mémo.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment empêcher les composants enfants de s'afficher en réaction ?

Restitut du composant parent React, les composants enfants n'ont pas besoin d'être rendus, trois méthodes d'optimisation des performances (PureComponent, memo, ShouldComponentUpdate);

//Lors de l'utilisation des fonctions ordinaires de React, vous pouvez utiliser deux méthodes d'optimisation, PureComponent et 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 'react';
//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 Mémo de méthode d'optimisation unique

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

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!