コンポーネントに反応するためにどのようなパフォーマンスの最適化が行われましたか?

React コンポーネントのパフォーマンスの最適化には、次のものが含まれます: 1. コンポーネントを構築するためにできるだけ多くのステートレス関数を使用する; 2. コンポーネントをサブコンポーネントに分割して、コンポーネントをよりきめ細かく制御できるようにする; 3. PureRender を使用して変更を処理する最小限のレンダリングを生成します。 4. 不変を使用します。

React コンポーネントのパフォーマンスの最適化には次のものが含まれます:

1. 可能な限りステートレス性を使用します。コンポーネントを構築する関数

ステートレス コンポーネントには、props と context という 2 つのパラメータしかありません。ステートもライフサイクル メソッドも持たず、コンポーネント自体がステートフル コンポーネント構築メソッドのレンダリング メソッドになります。

ステートレス コンポーネントは、必要に応じて使用する必要があります。ステートレス コンポーネントは、React.createClass や ES6 クラスのように呼び出し時に新しいインスタンスを作成せず、作成時に常にインスタンスを維持するため、不要なチェックやメモリ割り当てを回避し、内部の最適化を実現します。

2. コンポーネントをサブコンポーネントに分割し、コンポーネントをよりきめ細かく制御できるようにする

関連する重要な概念: Pure function

Pure関数 3 つの主要原則:

同じ入力が与えられると、常に同じ出力が返されます: たとえば、反例には Math.random()、New Date() が含まれます

このプロセスには副作用はありません: つまり、外部状態を変更することはできません。

追加の状態依存関係はありません。つまり、メソッド内部の状態はメソッドのライフサイクル内でのみ存続できます。つまり、メソッド内で共有変数を使用することはできません。その方法。

純粋関数はメソッドレベルのテストやリファクタリングに非常に便利で、プログラムの拡張性と適応性を高めることができます。純粋関数は関数式の基礎です。

React コンポーネント自体は純粋な関数です。つまり、指定された props を渡して特定の Virtual DOM を取得するものであり、プロセス全体は予測可能です。

具体的な方法

コンポーネントをよりきめ細かく制御できるように、コンポーネントをサブコンポーネントに分割します。純粋な状態を維持すると、メソッドやコンポーネントがより集中し、より小さく、より独立し、より再利用可能でテストしやすくなります。

3. PureRender を使用して変更のレンダリングを最小限に抑える

関連する重要な概念: PureRender

PureRender の純粋性たとえば、純粋な関数の条件が満たされている、つまり、同じプロパティと状態でレンダリングされたコンポーネントは同じ結果を取得します。

React で PureRender を実装するには、 shouldComponentUpdate ライフサイクル メソッドを再実装する必要があります。 shouldComponentUpdate は、更新する必要がある props と state を受け取る特別なメソッドであり、その本質は正しいコンポーネントのレンダリングを実行することです。 false を返すと、ライフサイクル メソッドは下方向に実行されなくなり、true を返すと、下方向に実行が継続されます。

コンポーネントは、初期化プロセス中にツリー構造をレンダリングします。親ノードのプロパティが変更されると、理想的には、1 つのリンク上の変更されたプロパティに関連するノードのみがレンダリングされます。ただし、デフォルトでは、 shouldComponentUpdateメソッドが true を返すと、React はすべてのノードを再レンダリングします。

ShouldComponentUpdate の書き換えを実装する公式プラグインがいくつかあり、PureRender を使用するためにコードの最適化を行うこともできます。

具体的な方法

(1) PureRenderを利用する

公式プラグインreact-addons-pure-render-mixinを利用して##を実装します#ShouldComponentUpdateRewriting

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return <div className={this.props.className}>foo</div>
  }
}

その原則は、オブジェクト (プロパティと状態を含む) の浅い比較、つまり参照比較、非値比較を行うことです。たとえば、詳細な比較を行わなくても、各プロパティが一致するかどうか (プロパティがオブジェクトの場合はアドレスのみが比較され、アドレスは同じ) に注意するだけで済みます。

(2)

PureRender

を最適化する

ShouldComponentUpdate をトリガーして、何があっても true を返すようなコードの記述は避けてください。

prop にリテラル配列やオブジェクトを直接設定することは避けてください。

渡される配列やオブジェクトの値が毎回変更されない場合でも、それらのアドレスも変更されます。

次の記述メソッドは、レンダリング時にスタイルが新しいオブジェクトになるたびに shouldComponentUpdate を true にトリガーします:

<Account style={{color: &#39;black&#39;}} />

改善方法: リテラルを参照に設定します:

const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />

毎回イベントをバインドしないでください

このようにイベントをバインドすると、毎回新しい

onChange 属性値が生成されます:

render() {
  return <input onChange={this.handleChange.bind(this)} />
}

これはコンストラクター内にある必要があります。可能な限りバインディング。バインディングでパラメーターを渡す必要がある場合は、サブコンポーネントを抽象化するか、既存のデータ構造を変更することを検討する必要があります。

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return <input onChange={this.handleChange} />
}

サブコンポーネントを設定するときは、親コンポーネント レベルでオーバーライドします。

shouldComponentUpdate

4. 不変を使用する

JavaScript のオブジェクトは一般に変更可能です。参照割り当てが使用されるため、新しいオブジェクトへの変更は元のオブジェクトに影響します。この問題を解決するためにディープコピーやシャローコピーが使用されますが、CPUやメモリの無駄が発生します。

不変データは、この問題をうまく解決します。

不変データとは、一度作成されると変更できないデータです。 Immutable オブジェクトを変更、追加、または削除すると、新しい Immutable オブジェクトが返されます。不変実装の原則は、永続的なデータ構造です。つまり、古いデータを使用して新しいデータを作成する場合、古いデータと新しいデータは同時に利用可能であり、変更されていないことが保証されます。同時に、ディープ コピーによるパフォーマンスの低下を避けるために、Immutable は構造共有を使用します。つまり、オブジェクト ツリー内のノードが変更された場合、このノードとその影響を受ける親ノードのみが変更され、他のノードは変更されます。共有されています。

関連する学習の推奨事項: JavaScript 学習チュートリアル

以上がコンポーネントに反応するためにどのようなパフォーマンスの最適化が行われましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。