ホームページ > 記事 > ウェブフロントエンド > 反応パフォーマンスの最適化となる周期関数はどれですか?
反応パフォーマンスの最適化となる周期関数はどれですか?
- WBOYオリジナル
- 2022-05-05 11:00:222177ブラウズ
React パフォーマンスの最適化は shouldComponentUpdate 定期関数です。この関数は、dom を再描画するために render メソッドを呼び出す必要があるかどうかを判断し、dom diff アルゴリズムを最適化できます。構文は「 shouldComponentUpdate(Props,state) 」です。 」。
このチュートリアルの動作環境: Windows 10 システム、react16.4.0 バージョン、Dell G3 コンピューター。
反応パフォーマンスの最適化はどの周期関数ですか?
ShouldComponentUpdate このメソッドは、DOM を再描画するために render メソッドを呼び出す必要があるかどうかを判断するために使用されます。 dom のレンダリングは多くのパフォーマンスを消費するため、より最適化された dom diff アルゴリズムを shouldComponentUpdate メソッドで記述できれば、パフォーマンスを大幅に向上させることができます。
shouldComponentUpdate() メソッドの形式は次のとおりです。
shouldComponentUpdate(nextProps, nextState)
ShouldComponentUpdate() メソッドは、React がレンダリングを継続するかどうかを指定するブール値を返します。デフォルト値は true、つまり、コンポーネントは状態が変化するたびに再レンダリングされます。
shouldComponentUpdate() の戻り値は、React コンポーネントの出力が現在の状態またはプロパティの変更によって影響を受けるかどうかを判断するために使用されます。プロパティまたは状態が変更されると、レンダリングが開始される前に 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('root'));
</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('root'));
</script>
</body>
</html>出力結果:
ボタンをクリックした後:
推奨される学習: 「react ビデオ チュートリアル 」
以上が反応パフォーマンスの最適化となる周期関数はどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。