不変の値とは何ですか?関数型プログラミングとは、プログラム内の関数と式が数学の関数のようになることを意味します。入力値が与えられると、出力は確実になります。例えば 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のパフォーマンス最適化は不変の値と切り離せない
クラス 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} </ボタン> ); } }
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 }); }
最後に、コンポーネントレベルで浅い比較をしたい場合は、React.memo()関数を使うことができます。 要約する実際、公式 Web サイトに記載されている不変性の 3 番目で最も重要な利点は、不変性によって React で PureComponent を使用できるようになることです。データが変更されたかどうか、コンポーネントをいつ再レンダリングする必要があるかを簡単に判断できます。 state の値を変更した場合、shouldComponentUpdate は現在の state と nextState を取得するか、props と nextProps で比較した値がまったく同じであれば、false が返されます。setState 操作を実行しても、UI は更新されません。 PureComponent は、パフォーマンスの最適化を実現するために Immutable.js と組み合わせて使用するのが最適です。 React.memo と組み合わせて、不要なコンポーネントの更新とレンダリングを回避します。 以上がReactにおける不変値についての詳しい説明です。Reactにおける不変値についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
<<: MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明
>>: Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法
目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...
ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...
間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...
1.移行遷移プロパティの使用法: transition :transition-property t...
Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...
序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...
1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...
CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...
Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...
説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...
目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...
HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...