React フレームワークの学習メモ

1.Webpackとは何ですか? Webパックを設定するにはどうすればよいですか?

webpack は、最新の JavaScript アプリケーション用の静的モジュールバンドラーです。一部のフレームワークが Webpack に統合されました。ただし、webpack の基本的な構成を理解する必要があります。

エントリ:
エントリポイントは、Webpack が内部依存関係グラフを構築するための開始点としてどのモジュールを使用する必要があるかを示します。エントリポイントを入力すると、webpack はどのモジュールとライブラリがエントリポイントに (直接的および間接的に) 依存しているかを調べます。
出力:
webpack に、作成するバンドルを出力する場所と、これらのファイルに名前を付ける方法を指示します。デフォルト値は ./dist です。基本的に、アプリケーション構造全体は、指定した出力パスのフォルダーにコンパイルされます。これらのプロセスは、構成で出力フィールドを指定することで構成できます。
mode:
対応するモード (開発または運用) の組み込みの最適化を使用するように webpack に指示します。
ローダー:
ローダー (モジュールのソースコードを変換するために使用)、Webpack が非 JavaScript モジュールを処理する方法を記述します (Webpack 自体は JavaScript のみを理解します)。
プラグイン:
プラグインの範囲には、パッケージ化の最適化や圧縮までが含まれます。

2. JSX 構文はどのように解析されますか?

まず、JSX とその解析ルールとは何かを理解しましょう。JSX は JavaScript と XML を組み合わせた形式です。React は、HTML 構文を使用して仮想 DOM を作成する JSX を発明しました。「<」が出現すると JSX は HTML として解析され、「{」が出現すると JavaScript として解析されます。

JSX 構文の本質は、JSX を直接ページにレンダリングするのではなく、内部で createElement の形式に変換してレンダリングすることであり、同時に JSX は JavaScript コードにコンパイルされるときに最適化されるため、実行効率も高くなります。

例として、JSX 構文の解析方法を見てみましょう。

まず、React 環境では、babel と使用するプラグインを事前にインストールする必要があります。

npm i @babel/core @babel/preset-env @babel/plugin-transform-React-jsx --save-dev

設定による構文解析:
plugins: [["@babel/plugin-transform-React-jsx{pragma: "ToyReact.createElement" },]

次に、@babel/plugin-transform-React-jsx が何をしたか見てみましょう。
jsxコード:

<div>123</div>

変換後のコード:

ToyReact.createElement.createElement("div", "123");

JSXコード:

<div>     
<div></div>    
<div></div>     
<div></div> 
</div>

変換後のコード:

React.createElement(     
"div",     
{
    
    },     
React.createElement("div", {
    
    }, ...chidren),     
React.createElement("div", {
    
    }, ...chidren),     
React.createElement("div", {
    
    }, ...chidren) 
)

一般に、次の 5 つの主要なステップに分けることができます。
ここに画像の説明を挿入

3. ToyReact のライフサイクルとライフサイクルでは何が起こりますか?

この問題を理解する前に、まず React のライフサイクル機能を理解してください。

コンポーネントがマウントされるときにトリガーされる関数:componentWillMount
コンポーネントのマウント時にトリガーされる関数:componentDidMount
データ更新時に関数をトリガーするかどうか: shouldComponentUpdate
データが更新されるときにトリガーされる関数:componentWillUpdate
データ更新の完了時にトリガーされる関数:componentDidUpdate
コンポーネントが破棄されようとしているときにトリガーされる関数:componentWillUnmount
親コンポーネントで props の値が変更されたときにトリガーされる関数:componentWillReceiveProps

ここでは、コンポーネントがマウントされる前と更新時の操作に焦点を当てます。componentWillMount とcomponentWillUpdate は、各コンポーネントのレンダリング前に、componentWillMount() を呼び出します。これは、サーバー側またはブラウザ側で呼び出すことができます。非同期リクエストがある場合、この時点でデータをリクエストすることはお勧めできません。具体的な理由は、データがレンダリング前に返されないことです。この落とし穴を理解しましょう。コンポーネントがデータ date() を更新しようとしているときに、componentWillUp が 1 回トリガーされ、更新を実行します操作。

コースに戻ります。クラスには mountTo() と update() などの 2 つの関数があります。それらの関数を推測してみましょう。React自体のライフサイクルに対応し、マウント前に必要な操作とアップデート時に必要な操作です。それでは、マウントする前に何をしましたか: setAttribute を通じてカスタム属性を追加し、addEventListener を通じてイベントを追加します。その後、レンダリングが実行されます。更新操作がある場合は、更新された要素が update() での比較によって置き換えられ、再度レンダリングされます。

4. Range オブジェクトの簡単な理解と使用

仮想DOMを操作する際にはRangeオブジェクトを使いますが、Rangeオブジェクトとは何でしょうか？何に使えますか?

Range オブジェクトはドキュメントの連続した範囲領域を表します。つまり、強調表示された選択領域です。Range の開始点と終了点は任意であり、開始点と終了点を同じにすることもできます (空の Range)。

Range の一般的なアプリケーションシナリオは、リッチテキストエディターに関連する操作を実行する場合であり、いくつかの単純な API もコースで使用されます。

まず、Range オブジェクトを作成し (createRange)、指定したノードの終点を Range オブジェクトで表される領域の始点に指定します (setStartAfter)。その後、指定したノードが Range オブジェクトで表される領域に挿入され、挿入位置が Range オブジェクトで表される領域の始点となります。ページ上に既にノードが存在する場合、そのノードは Range オブジェクトで表される領域の始点に移動されます (insertNode)。

5. 仮想 DOM の一般的な役割は何ですか? ToyReactではどのように実践されているのでしょうか？

React は DOM を仮想 DOM に抽象化し、JavaScript を使用して DOM ツリーをシミュレートし、それをブラウザーのメモリに配置します。変更の際、仮想 DOM は DIFF アルゴリズムを使用して新旧の仮想 DOM を比較し、変更を変更キューに入れ、最後に変更された部分のみを再レンダリングすることでレンダリング効率を向上させます。

仮想 DOM はどのような場合に使用する必要がありますか? DOM を頻繁に変更すると、ページのレンダリングが何度も発生してパフォーマンスに影響しますが、仮想 DOM を使用する場合は、違いを比較し、JS オブジェクト (生成された仮想 DOM) を変更し、最後に生成された DOM 構造をページに挿入するだけでレンダリングの回数が減り、ページ全体のレンダリング効率が向上します。

今回のコースでは、update()、つまり要素を更新する段階で、まず変更されたDOM構造を生成し、次にDOMツリーのtype、props、chirdrenなどを比較することで、DOMツリー全体の部分的な更新を実現します。