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 プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

推薦する

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

Docker プライマリ ネットワーク ポート マッピング構成

ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...

間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?

間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...

CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行遷移プロパティの使用法: transition :transition-property t...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...

Linux でのマルチスレッドプログラミング例の分析

1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...

CSS3 はクールな 3D 回転遠近法効果を実現します

CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

Dockerコンテナを外部IPとポートにバインドする方法

Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...

詳細なハードウェア情報を取得するための Linux のいくつかのコマンドの詳細な説明

Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

電子メールの HTML ページを作成するための原則の概要

HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...