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

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

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

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

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

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

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

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

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

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

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

Facebook のような企業(yè)がこの大きな問題に直面したとき、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 タグ內(nèi)には空の div だけがあり、root と呼ばれる ID があるだけであることに注意してください。

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

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

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

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

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

この useState は、インクリメント ボタンの狀態(tài)として機(jī)能します。 UseState のデフォルト値は、この狀態(tài)のデフォルト値を示します。この場合は 0 を指定する必要があります。 useState 関數(shù)は基本的に 2 つの要素を含む配列を返します。1 つは與えている値、もう 1 つは狀態(tài)値を更新する関數(shù)です。これで、配列を構(gòu)造化して分離しました。

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

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

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

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

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

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

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

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

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

以上がReact とは何ですか?またその仕組みは何ですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。