反応パフォーマンスの最適化となる周期関数はどれですか?-フロントエンドQ&A-php.cn

反応パフォーマンスの最適化となる周期関数はどれですか?

WBOY

リリース： 2022-05-05 11:00:22

オリジナル

2252 人が閲覧しました

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(&#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>

ログイン後にコピー

出力結果:

反応パフォーマンスの最適化となる周期関数はどれですか?