Reactにおける不変値の説明

Reactにおける不変値の説明

不変の値とは何ですか?

関数型プログラミングとは、プログラム内の関数と式が数学の関数のようになることを意味します。入力値が与えられると、出力は確実になります。例えば

a = 1 とします。
b = a + 1 とします。
=> a = 1 b = 2;

変数 b が現れ、変数 a の値が使用されるものの、a の値は変更されません。

よく知っているReactのコードを見てみましょう。this.state = { count: 1 } を初期化すると

コンポーネントマウント() {
    const newState = { ...状態、カウント: 2 }; // { カウント: 2 }
    新しい状態を設定します。
}

this.state を使用しましたが、this.state の参照アドレスを変更したり、count の値を直接変更したりはしていません。this.props についても同様です。

不変の値を使用するのはなぜですか?

React の公式ウェブサイトでは、次の 3 つの利点が説明されています。

  • 複雑な機能を簡素化

不変性により、複雑な機能の実装が容易になります。

  • データの変更の追跡

データを直接変更すると、変更を追跡することが難しくなります。データの変更を追跡するには、変更可能なオブジェクトを変更前のバージョンと比較する必要があるため、オブジェクト ツリー全体を 1 回走査する必要があります。

不変データへの変更を追跡するのは比較的簡単です。オブジェクトが新しいオブジェクトになったことがわかった場合、オブジェクトは変更されたと言えます。

  • Reactで再レンダリングするタイミングを決定する

不変性の主な利点は、React で純粋なコンポーネントを作成するのに役立つことです。不変データが変更されたかどうか、そしてコンポーネントをいつ再レンダリングするかを簡単に判断できます。

Reactのパフォーマンス最適化は不変の値と切り離せない

  • まず、shouldComponentUpdate フック関数はデフォルトで true を返す、つまり親コンポーネントが更新される限り、子コンポーネントも更新される必要があることは誰もが知っています。
  • shouldComponentUdpate は、nextProps と nextState の 2 つのパラメータを受け取ることができます。this.props.xxx が nextProps.xxx に等しく、this.state.xxx が nextState.xxx に等しいと判断された場合、戻り値を false に設定して、今回はサブコンポーネントを更新する必要がないことを示すことができます。
クラス CounterButton は React.Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {count: 1};
  }

  コンポーネントを更新する必要があります(次のプロパティ、次の状態) {
    if (this.props.color !== nextProps.color) {
      true を返します。
    }
    if (this.state.count !== nextState.count) {
      true を返します。
    }
    false を返します。
  }

  与える() {
    戻る (
      <ボタン
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        カウント: {this.state.count}
      </ボタン>
    );
  }
}
  • React v15.3 では、props と state に対して浅い比較を実行してレンダリング関数の実行回数を減らし、不要なコンポーネントのレンダリングを回避し、パフォーマンスの最適化を実現できる新しい PureComponent クラスが追加されました。
  • PureComponentの原理は何ですか?

JS の変数型は、基本型 (数値、文字列、ブール値、未定義、null、シンボル) と参照型 (関数、オブジェクト、関数) に分かれていることはわかっています。基本型の値はスタック メモリに格納され、参照型の値はヒープ メモリに格納されます。スタック メモリには、ヒープ メモリへの参照のみが格納されます。浅い比較は、スタック メモリ内のデータのみを比較します。

クラスAppはPureComponentを拡張します{
  状態 = {
    アイテム: [1, 2, 3]
  }
  ハンドルクリック = () => {
    const { items } = this.state;
    アイテムをポップします。
    this.setState({ items });
  }
  与える() {
    戻る (
        <div>
            <ul>
                {this.state.items.map(i => <li キー={i}>{i}</li>)}
            </ul>
            <button onClick={this.handleClick}>削除</button>
        </div>
    )
  }
}

上記の例では PureComponent を使用しており、アイテムの参照アドレスを変更せずに items 配列の値のみを変更しています。そのため、アイテムは変更されていないとみなされ、レンダリング関数はトリガーされず、コンポーネントのレンダリングはトリガーされません。

コンポーネントの更新を実装する場合は、次のように新しい配列を作成し、新しい配列のアドレスを items に割り当てることができます。

ハンドルクリック = () => {
    const { items } = this.state;
    アイテムをポップします。
    var newItem = [...アイテム];
    this.setState({ 項目: newItem });
}
  • PureComponent は浅い比較を行うのに役立つので、状態にできるだけ注意を払う必要があります。データ構造内のネストされた参照を参照する必要がある場合は、Immutable.js を使用できます。
  • 不変とは何か

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

最後に、コンポーネントレベルで浅い比較をしたい場合は、React.memo()関数を使うことができます。

要約する

実際、公式 Web サイトに記載されている不変性の 3 番目で最も重要な利点は、不変性によって React で PureComponent を使用できるようになることです。データが変更されたかどうか、コンポーネントをいつ再レンダリングする必要があるかを簡単に判断できます。

state の値を変更した場合、shouldComponentUpdate は現在の state と nextState を取得するか、props と nextProps で比較した値がまったく同じであれば、false が返されます。setState 操作を実行しても、UI は更新されません。

PureComponent は、パフォーマンスの最適化を実現するために Immutable.js と組み合わせて使用​​するのが最適です。

React.memo と組み合わせて、不要なコンポーネントの更新とレンダリングを回避します。

以上がReactにおける不変値についての詳しい説明です。Reactにおける不変値についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • 入力ボックスの値を取得する方法のReactの例
  • React ant Designはフォームの値を手動で設定します
  • Reactはantdフォーム割り当てを使用してポップアップボックスの操作を変更します
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • React PropTypes 検証合格値操作の例
  • Reactコンポーネントの値の受け渡しの関係の詳細な説明
  • Reactコンポーネントで値を渡す3つの方法
  • Vue と React コンポーネント間の値の転送の詳細な説明
  • 親コンポーネントと子コンポーネント間で値を渡すReactメソッド
  • Reactのキー値の役割と使用法の詳細な説明
  • 親コンポーネントと子コンポーネント間で値を渡すReactメソッド
  • Reactの子コンポーネントは親コンポーネントに値を転送します
  • react-routerがジャンプ値転送を実装する方法の例

<<:  MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

>>:  Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

推薦する

フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

mysql 複数テーブル接続削除関数の削除

単一のテーブルを削除する: tableName から columnName = value を削除し...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

Dockerでホストファイルをカスタマイズする方法について簡単に説明します

目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...

Dockerコンテナのログ分析

コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...

html+cssレイアウトの3つの方法(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....

Windows Server 2016 リモート デスクトップ サービスを展開するためのクイック スタート ガイド

現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...

MySQL インデックス失敗の原理

目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法

目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

MySQL 5.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

mysqlreplicate を使って MySQL マスタースレーブを素早く構築する方法

導入mysql-utilities ツールセットは、DBA のツールボックスとも言えるさまざまなツー...

nginx と Tencent Cloud の無料証明書を使用して https を作成する方法

httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...