不変の値とは何ですか?関数型プログラミングとは、プログラム内の関数と式が数学の関数のようになることを意味します。入力値が与えられると、出力は確実になります。例えば 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 プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...
単一のテーブルを削除する: tableName から columnName = value を削除し...
1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...
目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...
コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...
1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....
現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...
目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...
仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...
目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...
質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...
通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...
導入mysql-utilities ツールセットは、DBA のツールボックスとも言えるさまざまなツー...
httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...