Rumah > Artikel > hujung hadapan web > Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?
Fungsi berkala yang manakah merupakan pengoptimuman prestasi bertindak balas?
- WBOYasal
- 2022-05-05 11:00:222269semak imbas
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 )".
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)
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('root'));
</script>
</body>
</html>Hasil keluaran:
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('root'));
</script>
</body>
</html>Hasil output:
Selepas mengklik butang:
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!