반응 성능 최적화는 어떤 주기 함수인가요?-프런트엔드 Q&A-php.cn

반응 성능 최적화는 어떤 주기 함수인가요?

WBOY

풀어 주다： 2022-05-05 11:00:22

원래의

2267명이 탐색했습니다.

React 성능 최적화는 shouldComponentUpdate 주기 함수입니다. 이 함수는 dom을 다시 그리기 위해 render 메서드를 호출해야 하는지 여부를 결정할 수 있으며 구문은 "shouldComponentUpdate(Props, state)"입니다.

반응 성능 최적화는 어떤 주기 함수인가요?

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

반응 성능 최적화는 어떤 주기 함수인가요?

shouldComponentUpdate 이 메서드는 DOM을 다시 그리기 위해 렌더링 메서드를 호출해야 하는지 여부를 결정하는 데 사용됩니다. DOM 렌더링은 성능을 많이 소모하기 때문에 shouldComponentUpdate 메소드에 좀 더 최적화된 DOM diff 알고리즘을 작성할 수 있다면 성능이 크게 향상될 수 있습니다

shouldComponentUpdate() 메소드 형식은 다음과 같습니다.

shouldComponentUpdate(nextProps, nextState)

로그인 후 복사

shouldComponentUpdate() 메소드 React가 계속 렌더링해야 하는지 여부를 지정하는 부울 값을 반환합니다. 기본값은 true입니다. 즉, 상태가 변경될 때마다 구성 요소가 다시 렌더링됩니다.

shouldComponentUpdate()의 반환 값은 React 컴포넌트의 출력이 현재 상태 또는 props의 변경에 영향을 받는지 결정하는 데 사용됩니다. props 또는 상태가 변경되면 렌더링이 실행되기 전에 shouldComponentUpdate()가 호출됩니다.

다음 예는 shouldComponentUpdate() 메서드가 false를 반환할 때 수행되는 작업을 보여줍니다(버튼을 클릭하여 수정할 수 없음).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "runoob"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeSite = () => {
    this.setState({favoritesite: "google"});
  }
  render() {
    return (
      <div>
      <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById(&#39;root&#39;));
</script>
</body>
</html>

로그인 후 복사

출력 결과:

반응 성능 최적화는 어떤 주기 함수인가요?

다음 예는 shouldComponentUpdate()가 반환될 때 수행되는 작업을 보여줍니다. 메소드가 true를 반환합니다(버튼을 클릭하면 수정 가능):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "runoob"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeSite = () => {
    this.setState({favoritesite: "google"});
  }
  render() {
    return (
      <div>
      <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById(&#39;root&#39;));
</script>
</body>
</html>

로그인 후 복사

출력 결과:

반응 성능 최적화는 어떤 주기 함수인가요?