Reactとその仮想DOMの仕組みを学ぶためのクイックガイド

Unsplashの@simonmigajによる写真
これは、Reactの紹介、コア機能、および従うべきベストプラクティスに関する「初心者向けのReact」シリーズの一部です。さらに記事が来ています!
次の記事>

ドキュメントをクロールせずにReactを学習しますか(よく書かれています)。適切な記事をクリックしました。

単一のHTMLファイルを使用してReactを実行し、最初のスニペットを公開する方法を学習します。

最後までに、これらの概念を説明できるようになります:小道具、機能コンポーネント、JSX、および仮想DOM。

目標は、時間と分を表示する時計を作ることです。 Reactは、コンポーネントを使用してコードを設計することを提案しています。監視コンポーネントを作成しましょう。

依存関係のHTMLボイラープレートとスクリプトのインポートを無視します(unpkgを使用、Reactの例を参照)。残りの数行は、実際にはReactコードです。

最初に、Watchコンポーネントとそのテンプレートを定義します。次に、ReactをDOMにマウントし、ウォッチのレンダリングを要求します。

コンポーネントにデータを注入する

私たちの時計は非常に愚かで、提供された時間と分を表示します。

これらのプロパティの値を変更してみてください(Reactではpropsと呼ばれます)。数字でなくても、常にあなたが求めたものが表示されます。

レンダリング機能のみを備えたこの種のReactコンポーネントは、機能的なコンポーネントです。クラスに比べて簡潔な構文を持っています。

小道具は、一般的に周囲のコンポーネントによって、コンポーネントに渡されるデータのみです。コンポーネントは、ビジネスロジックとレンダリングに小道具を使用します。

しかし、小道具がコンポーネントに属さない場合、それらは不変です。したがって、小道具を提供したコンポーネントは、小道具の値を更新できる唯一のコードです。

小道具の使用は非常に簡単です。タグ名としてコンポーネント名を使用してDOMノードを作成します。次に、propsにちなんで名付けられた属性を与えます。次に、コンポーネントのthis.propsを介して小道具を使用できます。

引用されていないHTMLはどうですか?

renderfunctionによって返される引用符で囲まれていないHTMLに気付くと確信しています。このコードはJSX言語を使用しています。これは、ReactコンポーネントでHTMLテンプレートを定義するための簡略構文です。

ここで、JSXがコンポーネントのテンプレートを定義するのを避けることができます。実際、JSXは構文糖のように見えます。

あなたの意見を構築するためのJSXとReactの両方の構文を示す次のスニペットを見てください。

Virtual DOMをさらに活用する

この最後の部分はより複雑ですが、非常に興味深いものです。 Reactが内部でどのように機能しているかを理解するのに役立ちます。

Webページ(DOMツリーのノード)の要素を更新するには、DOM APIを使用する必要があります。ページを再描画しますが、時間がかかる場合があります(理由については、この記事を参照してください)。

ReactやVue.jsなどの多くのフレームワークがこの問題を回避します。彼らは、仮想DOMと呼ばれるソリューションを考え出します。

アイデアはシンプルです。 DOMツリーの読み取りと更新は非常に高価です。したがって、可能な限り少ない変更を行い、可能な限り少ないノードを更新します。

DOM APIの呼び出しを減らすには、DOMツリー表現をメモリに保持する必要があります。 JavaScriptフレームワークについて話しているので、JSONを選択することは正当なように思えます。

このアプローチは、仮想DOMの変更を即座に反映します。

また、いくつかの更新を収集して、後でパフォーマンスの問題を回避するためにReal DOMに一度に適用します。

React.createElementを覚えていますか?実際、この関数(直接またはJSXを介して呼び出されます)は、仮想DOMに新しいノードを作成します。

更新を適用するには、仮想DOMコア機能である調整アルゴリズムが使用されます。

その仕事は、以前と現在の仮想DOM状態の違いを解決するために、最も最適化されたソリューションを考え出すことです。

そして、新しい仮想DOMを実際のDOMに適用します。

さらに読む

この記事では、Reactの内部および仮想DOMの説明について説明します。それでも、フレームワークを使用するときにフレームワークがどのように機能するかについて少し知っておくことが重要です。

Virtual DOMがどのように機能するかを詳しく知りたい場合は、読書に関する推奨事項に従ってください。独自の仮想DOMを作成し、DOMレンダリングについて学習できます。

読んでくれてありがとう。 Reactの最初のステップとしてこれが技術的すぎる場合は申し訳ありません。しかし、今では、小道具、機能コンポーネント、JSX、および仮想DOMが何であるかを知っていることを願っています。

この記事が役に立つと思ったら、ボタンを数回クリックして、他の人に記事を見つけてもらい、サポートを見せてください!

今後の記事の通知を受け取るために私をフォローすることを忘れないでください

これは、Reactの紹介、コア機能、および従うべきベストプラクティスに関する「初心者向けのReact」シリーズの一部です。
次の記事>

私の他の記事をチェックしてください

➥JavaScript

  • 独自のWeb開発フレームワークを作成してJavaScriptスキルを向上させる方法
  • Vue.jsでの作業中に避けるべき一般的な間違い

➥ヒントとコツ

  • 苦痛なJavaScriptデバッグを停止し、ソースマップでIntellijを採用
  • 手間をかけずに膨大なJavaScriptバンドルを削減する方法

当初は2018年2月6日にwww.linkedin.comで公開されました。