하위 구성 요소가 반응으로 렌더링되는 것을 방지하는 방법

React 메서드를 사용하여 하위 구성 요소 렌더링을 방지합니다. 1. "shouldComponentUpdate(nextProps,nextState){...}"를 사용하여 상위 구성 요소 렌더링을 달성하면 하위 구성 요소가 렌더링되지 않습니다. 2. 하위 구성 요소를 방지하려면 "PureComponent"를 사용합니다. 3. 메모를 소개하고 메모로 고리를 묶습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

하위 구성 요소가 반응으로 렌더링되는 것을 방지하는 방법은 무엇입니까?

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 '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 고유한 최적화 방법 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>
 
    )
  }
}

추천 학습: "react 비디오 튜토리얼"

위 내용은 하위 구성 요소가 반응으로 렌더링되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!