React とは何ですか?またその仕組みは何ですか?

React は、ユーザー インターフェイスを構築するための Javascript ライブラリです。ここで 2 つのことが重要です。1 つは Javascript ライブラリ、もう 1 つはユーザー インターフェイスです。ライブラリはコードのコレクションであり、アプリケーションを作成するために再利用できます。 React とコードのコレクションを使用することで、Web アプリケーション、モバイル、デスクトップ アプリケーション、ユーザー インターフェイスを作成できます。

アプリケーションについて話すときは、基本的に 2 つの部分で構成されます。 1 つはフロントエンド (つまり、ユーザー インターフェイス) で、もう 1 つはバックエンドで、すべてのロジックが存在します。
フロントエンドは、閲覧、ボタンのクリック、フォームの送信など、ユーザーが対話する部分です。次に、フロントエンドがバックエンドでそれに応答します。
そして、バックエンドには、認証、認可、データ操作など、多くの複雑なロジックとデータが含まれています。
しかし、React はバックエンドにはまったく関与しません。 React はユーザー インターフェイスでのみ機能します。

Web について話す場合、JavaScript がブラウザのデフォルトのプログラミング言語であることはご存知でしょう。しかし、React はプログラミング言語ではなく、単なる Javascript ライブラリです。
つまり、React で行うことはすべて、最終的には純粋なバニラ Javascript にすぎません。

さて、質問させてください。 React は 2013 年に登場しましたが、その前にユーザー インターフェイスを作成しませんでしたか?
はい、以前に純粋な Javascript と jQuery を使用してこれを実行しました。
ここで問題は、なぜ React が再び登場したのかということです。 Javascript にはどのような問題がありますか?
React が実際にどのような問題を解決するのかを理解するには、もう少し深く掘り下げる必要があります。深く掘り下げてみましょう...!

小さなアプリケーションで見てみましょう。以下に示すように、counterNumber と button という名前の 2 つの ID を持つ単純な HTML コードである小さなカウンター アプリケーションを作成します。

JavaScript コードの画像を見てください。簡単なコードがあります。このコードを説明するつもりはありません。私の言っている意味に注目してください。

counterNumber と button を DOM 要素として選択し、addEventListener でカウント値を 1 ずつインクリメントします。次に、そこで counterNumberEl の値が更新されます。ここで実際に何が起こっているのでしょうか？よく見ると、基本的に 2 つの関数があることがわかります:

1.要素を取得して操作することが、私たちがやりたいことです。
2. UI (ユーザーインターフェース) の更新

それで、ここで何が問題なのでしょうか?コードは機能しています!ただし、2 つのカウンター アプリケーションが必要だとします。それではどうすればよいでしょうか?

その HTML に戻って新しい div を取得し、新しい ID を使用して個別に取得する必要があります。その後、UI を後で更新する必要があります。

ここでは 2 つのカウンター アプリケーションについてのみ説明しますが、インタラクションが多すぎて UI が複雑になると、開発者は圧倒されてしまいます。これが一番の問題です！一方では機能を作成し、他方では UI を更新することになりますが、これは非常に苦痛になります。

Facebook のような企業がこの大きな問題に直面したとき、Facebook のソフトウェア エンジニアである Jordan Walke は、PHP のコンポーネント ベース フレームワーク XHP-js に触発されて、2011 年に React.js を作成しました。 2011 年に Facebook のニュースフィードに初めて実装され、2012 年には Instagram にも使用されました。 2013 年に React.js をオープンソース化しました。

これで、React を使用する理由が分かりました。それでは、バニラ JS で行ったカウンター アプリケーションを React を使用して実行してみましょう。そうすれば、React 以降、開発者の生活がどれほど楽になったかという自信が高まるでしょう。コードに行きましょう…

まず、便宜上 React をインストールする方法を説明しますが、私たちのプロジェクトではこの方法で React を使用する人はいません。コアレベルから理解できるように、理解を容易にするためにこのように示しているだけです。

ここでは、react.org サイトからのリンクにあるとおり、React に接続しました。ここで、react.js ファイルに移動して console.log(React) と console.log(ReactDOM) を書き込むと、コンソールに 2 つのオブジェクトが表示されます。これは、React が接続されていることを意味します。 body タグ内には空の div だけがあり、root と呼ばれる ID があるだけであることに注意してください。

JavaScript では、最初にセレクターを操作したのと同じ方法で、DOM 内に要素を作成できます。同様に、React でも要素を作成できます。ここでは div が作成され、その中に p タグ付きの Hello World が出力されます。現時点では問題ないようですが、作成する要素が多すぎると人生が終わってしまいます。同じことを何度も繰り返すのは問題です。 React が JSX (JavaScript XML) と呼ばれる独自のマークアップを作成したのはこのためです。 HTML のように見えますが、実際は JSX です。

上の画像ではこのように書かれています。しかし問題は、ブラウザはこの JSX を理解できないということです。この問題を解決するために、JSX をブラウザが理解できるバニラ JS にトランスパイルするトランスパイラー Babel が登場します。

Babel に接続するには、当社の Web サイトにアクセスしてください >セットアップ > 作成した HTML および js ファイルの body タグの下にこのリンクをコピーします。 =”text/babel” があります。

これは JSX なので、ここに必要な JavaScript を書き込むことができます。そこで、この構文を単純化してみましょう。まずはこれを JS 関数に入れてみましょう。

ここで、myElement に Increment という関数を追加しただけであることに注意してください。Increment 関数をこのように作成すると、React での記述が容易になります。これで、ここに JS を書くことができます。ここで前の JS コードを使用して作業していれば、うまくいったはずです。しかし、React は、私と同じ方法で状態を管理したい場合は、UI の更新について考える必要はないと言っています。そこで、React では useState という関数が提供されており、その使用方法を示しています。

この useState は、インクリメント ボタンの状態として機能します。 UseState のデフォルト値は、この状態のデフォルト値を示します。この場合は 0 を指定する必要があります。 useState 関数は基本的に 2 つの要素を含む配列を返します。1 つは与えている値、もう 1 つは状態値を更新する関数です。これで、配列を構造化して分離しました。

初期値として counter が必要な場合は、戻り後に 0 の代わりにこのように {counter} を指定できます。これを補間といいます。これで、カウンターの値が動的に変化します。そして、ボタンの onClick (JSX なので、onClick のようにキャメルケースに従って書く必要があります) は機能と呼ばれる必要があります。

このように与えれば完了ですが、ここで問題があります。このように setCounter 関数を呼び出すと、すでに呼び出されてしまいますが、これは望ましくありません。誰かがボタンをクリックしたときにボタンの値が増加するようにします。したがって、匿名のアロー関数を作成する必要があります。そうすれば問題は解決されます。

ここで、DOM の要素を取得して UI を手動で更新していないことに気付いた方は、ここでは必要なことを React に伝えただけで、残りは React が UI 自体を更新しました。

JS の例を示したときに、JS に関して抱えていた大きな問題は、UI を手動で更新する必要があるということでした。アプリケーションを再度使用したい場合は、同じことを何度も繰り返す必要があります。

しかし、React はこれらの問題を両方とも解決します。 UI を手動で更新せずに React がどのように機能するかを説明しました。次に、このアプリケーションを 2 ～ 3 か所で使用する必要がある場合に React がどのように役立つかを見ていきます。

ここを見てください、私はただ <>ここでは、increment 関数を 2 回呼び出しており、作業は完了です。ここで最も興味深いのは、2 つのアプリケーションを別々に実行できることです。これは、アプリケーションが別々に状態を管理することを意味します。つまり、必要に応じてウェブサイト全体のどこでも使用できますが、やはり場所が違えば場所も異なり、つまり、ある場所と別の場所は関連性がありません。これが Reactjs の威力です。

基本的に、機能がどのようなものになるかを React に指示すると、React はそれに応じて UI を自動的に更新します。これが ReactJS の利点です

それで、React について何を話しているのでしょうか?なぜ React を使用するのでしょうか? React がどのような問題を解決することになったのかを完全に理解しました。このような質問はもう面接掲示板であなたを妨げることはできません。これほどの忍耐力を持って完全に読むのは簡単なことではありません、兄弟。やったね、頑張ってね。

コーディングを楽しんでください!

以上がReact とは何ですか?またその仕組みは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。