Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?-Soal Jawab bahagian hadapan-php.cn

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

WBOY

Lepaskan： 2022-05-05 11:00:22

asal

2267 orang telah melayarinya

Pengoptimuman prestasi tindak balas ialah fungsi berkala shouldComponentUpdate; fungsi ini boleh menentukan sama ada perlu untuk memanggil kaedah render untuk melukis semula dom, dan boleh mengoptimumkan algoritma dom diff )".

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

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

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

sepatutnyaComponentUpdate Kaedah ini digunakan untuk menentukan sama ada kaedah render perlu dipanggil untuk melukis semula dom. Oleh kerana pemaparan DOM menggunakan banyak prestasi, jika kita boleh menulis algoritma diff DOM yang lebih dioptimumkan dalam kaedah shouldComponentUpdate, prestasi boleh dipertingkatkan dengan sangat baik

format kaedah shouldComponentUpdate() adalah seperti berikut:

shouldComponentUpdate(nextProps, nextState)

Salin selepas log masuk

Kaedah shouldComponentUpdate() akan mengembalikan nilai Boolean, menyatakan sama ada React harus meneruskan pemaparan Nilai lalai adalah benar, iaitu, komponen akan dipaparkan semula setiap kali keadaan berubah.

Nilai pulangan shouldComponentUpdate() digunakan untuk menentukan sama ada output komponen React dipengaruhi oleh perubahan dalam keadaan semasa atau props Apabila prop atau keadaan berubah, shouldComponentUpdate() akan dipanggil sebelum rendering dilaksanakan.

Contoh berikut menunjukkan operasi yang dilakukan apabila kaedah shouldComponentUpdate() mengembalikan palsu (tidak boleh diubah suai dengan mengklik butang):

<!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>

Salin selepas log masuk

Hasil keluaran:

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

Contoh berikut menunjukkan operasi yang dilakukan apabila kaedah shouldComponentUpdate() mengembalikan benar (klik butang untuk mengubah suai):

<!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>

Salin selepas log masuk

Hasil output:

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

Selepas mengklik butang:

Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!