React の使用: React フレームワークの 5 つの主要な機能

この記事では、React の使用方法を紹介します。React フレームワークの 5 つの主要な機能には、特定の参考値があります。必要な友人はそれを参照してください。

01. Reactが登場した時代背景

世の中のあらゆるものには因果があり、フレームワークの出現には特定の時代背景が不可分であるはずです。 React については、言及しなければならない主な背景が 2 つあります:

1. 大量のビジネス ロジックがバックエンド実装からフロントエンド実装に変更されました: AJAX テクノロジの出現により、人々が追求するようになりました。よりスムーズな Web インタラクション エクスペリエンス。大量の複雑なビジネス ロジックがバックエンド開発からフロントエンド開発に変更され、量的な変更が質的な変化につながりました。この規模のフロントエンド コードを整理して管理する必要があるでしょうか?アプリケーションのパフォーマンスをより良く改善するにはどうすればよいでしょうか?バックエンド開発における数十年の経験を踏まえると、その答えが 大規模フロントエンド フレームワーク を使用することであることは驚くことではありません。

2. 複雑なロジックを備えた SPA アプリケーションの場合、元のフロントエンド フレームワークはパフォーマンスが低いです: React が登場する前に、すでに backbone.js 与 Angular.js などの成熟した大規模フロントエンド フレームワークが存在していました。しかし、Facebook のエンジニアは次のことに気づきました。複雑なビジネスに直面した場合、頻繁な DOM 操作などのシナリオでは、これらのフレームワークでは良好なページ パフォーマンスを実現できないため、この問題を解決するフレームワークを開発する予定です。開発されたフレームワークは React であり、この問題を解決するための解決策は: を使用することです。仮想 DOM 。

02. 仮想 DOM

仮想 DOM の概念は、実際には理解するのが難しいことではありません。頻繁に DOM 操作を行うと、ブラウザーが DOM ツリー上で大量の計算を実行することはわかっています。フロントエンドの重要なパフォーマンスのボトルネック。したがって、複数の DOM 操作をマージし、DOM ツリー上でタイムリーかつ 1 回限りの集中操作で「結果を 1 回の操作で完了する」ことができれば、フロントエンドのパフォーマンスを大幅に向上させることができます。 React の場合、このアイデアを実現するためのソリューションは

Virtual DOM

を使用することです。 DOM ツリーと呼ばれるものは、実際にはツリー構造にネストされた JavaScript オブジェクトです。ブラウザでは、DOM ツリーに変更を加えると一連の計算が実行されます。そのため、既存の DOM ツリー構造に基づいて、同一の DOM ツリー、つまり「仮想 DOM」とすべての変更を複製できます。この仮想 DOM に実装され、ブラウザ内の DOM ツリーにマージされて、前述のパフォーマンスのボトルネックが解決されます。 理解するのは難しくありませんが、このプロセスには実際には多くの複雑な状況といくつかのアルゴリズムの問​​題が含まれており、説明するには新しい記事を開くのに十分なので、ここでは詳しく説明しません。

03. コンポーネント化とは何ですか?

コンポーネント化は、いくつかの単純な関数をより複雑な関数に構築して使用できることを意味するコード設計パターンです。

コンポーネント化には 2 つの注目すべき機能があります:

カプセル化: コンポーネントに必要なデータはコンポーネント内にカプセル化されます。
構成: コンポーネントを他のコンポーネントと組み合わせて、より複雑なビジネス ロジックを実装できます。
2. React の最も優れた点は、React のすべての UI 要素がコンポーネントであり、コンポーネントは単なる JavaScript 関数であることです。ただし、いくつかのパラメーターを受け取って値を返す従来の関数と比較して、React 関数はいくつかのパラメーターを受け取り、インターフェイス内の UI 要素を返します。
   優れた関数が「DOT」(Do One Thing) 原則に準拠している必要があるのと同様に、優れた React コンポーネントは他のコンポーネントのビジネス ロジックを混在させることができません。そのため、React コンポーネントの内部が複雑になるようにする必要があります。 React コンポーネントのロジックが明確になります。

次の式は、React における「ビューはデータのレンダリングである」というコンポーネント化のアイデアをうまく​​表現できます:

UI = render(data)

このように、React では、複雑なビューを形成する方法が非常に簡単になります:

Composition Components

;

04. 宣言型コード

宣言型コードとは、開発者が「コンピューターに何をさせたいか」ではなく「自分が何をしたいか」という観点からビジネス要件を達成する方法を考えることを可能にするコードを指します。

「宣言型コード」と「命令型コード」の違いを簡単に比較してみましょう:

命令型コード:

天気が暑すぎると感じて、コードを書く:

1. 拿起空调遥控器；
2. 打开空调；
3. 设置温度为 27 摄氏度；

• 宣言型コード:
  天気が良いときの気分暑すぎるので、次のコードを記述します:

  1. 调用“开空调(27)”函数；

• 宣言型コードは単に
  カプセル化された命令型コード

  を呼び出しているだけのように見えますが、本質的には、これはより良いプログラミングの考え方であり、もはや
を介して関数を実装する方法だけに焦点を当てる必要はありませんコード

ですが、ビジネスロジックを実装するために、コード

にどのような関数(関数)が必要なのかをもっと考えて、関数の設計と関数間の関係を考えて、コードロジックがより明確で整然としたものになるようにしましょう。

05. 一方向のデータフロー

React では、データは上から下へ一方向に流れるツリー状に編成されます (DOM ツリーに相当します)。ステータスをより制御しやすくします;

複雑なビジネスロジックを持つシングルページアプリケーションの場合、フロントエンドは大量のデータを処理し、データ間の関係も複雑になります。また、React はコンポーネント開発を採用しており、明確で合理的なデータ フロー管理方法がなければ、UI またはデータでエラーが発生すると、最終的なコードは混乱の原因となるだけです。 。

これを考慮して、React は親要素から子要素へのデータのフローのみを許可する「一方向データ フロー」アプローチを使用します。

React の一方向データ フローのメカニズムは大まかに次のとおりです。データは親コンポーネントに保存され、子コンポーネントに下流に流れます。データは親コンポーネントに保存されますが、親コンポーネントと子コンポーネントの両方がこのデータを使用できます。ただし、データを更新する必要がある場合は、親コンポーネントのみを更新する必要があります。子コンポーネントがデータを変更する必要がある場合は、更新されたデータを親コンポーネントに送信するだけで、そこでデータが実際に更新されます。親コンポーネントによってデータが更新されると、子コンポーネントは新しいデータを受け取ります。

一方向のデータ フローは余分な作業が追加されるように思えますが、開発者はアプリケーションがどのように動作するかを理解しやすくなります。

06. 純粋な JavaScript 構文

React のこの機能は見落とされがちです。つまり、React では、理解して覚えておく必要がある特別な独自の React 構文はなく、すべてのコンポーネント、データ操作、ビジネス ロジックがこれは JavaScript 構文を使用して実現されます。

これは、React を使用したい場合は、React の考え方といくつかの重要な API を理解するだけで、React を使用して複雑なアプリケーションをすぐに開発できることを意味します。また、React では、開発に関数型プログラミングのアイデアを使用することも推奨されています。React 開発では関数型プログラミングのスキルを活用できます。

07. 概要

この記事では、まず React フレームワークの背景について説明し、次に React の 5 つの主要な機能について説明しました。 ;

1. 一方向データフロー;

2. 純粋な JavaScript 構文;

3. 関連推奨事項:

Node でのイベント ループの分析について

5. act Native Echarts コンポーネントはじめに

以上がReact の使用: React フレームワークの 5 つの主要な機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。