1. setState を呼び出した後はどうなりますか?
コード内で setState 関数を呼び出した後、React は渡されたパラメーター オブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス (Reconciliation) をトリガーします。調整プロセスの後、React は比較的効率的な方法で新しい状態に基づいて React 要素ツリーを構築し、UI インターフェイス全体の再レンダリングを開始します。React が要素ツリーを取得した後、React は新しいツリーと古いツリーの間のノードの差を自動的に計算し、その差に基づいてインターフェイスを最小化し、再レンダリングします。差分計算アルゴリズムでは、React はどの位置が変更され、どのように変更されるべきかを比較的正確に知ることができるため、完全な再レンダリングではなくオンデマンドの更新が保証されます。
2.反応ライフサイクル機能
初期化フェーズ:
getDefaultProps: インスタンスのデフォルトのプロパティを取得します。
getInitialState: 各インスタンスの初期化状態を取得します。
ComponentWillMount: コンポーネントがページにロードされ、レンダリングされようとしています。
render: コンポーネントはここに仮想 DOM ノードを生成します
ComponentDidMount: コンポーネントはロードされた後に実際にロードされます。
実行ステータス:
ComponentWillReceiveProps: コンポーネントがプロパティを受信しようとしているときに呼び出されます。
shouldComponentUpdate: コンポーネントが新しい属性または新しい状態を受け取ったとき (false を返すことができ、データを受け取った後に更新せず、レンダー呼び出しを防止し、後続の関数は実行されません)
ComponentWillUpdate: コンポーネントはまもなく更新されますが、プロパティとステータスを変更できません。
render: コンポーネントが再レンダリングされます。componentDidUpdate: コンポーネントが更新されました。
破壊フェーズ:
ComponentWillUnmount: コンポーネントが破棄されようとしています
3. 仮想 DOM によってパフォーマンスが向上するのはなぜですか?
仮想 dom は、js と実際の dom の間にキャッシュを追加するのと同等で、dom diff アルゴリズムを使用して不必要な dom 操作を回避し、パフォーマンスを向上させます。JavaScript オブジェクト構造を使用して DOM ツリーの構造を表し、このツリーを使用して実際の DOM ツリーを構築し、それをドキュメントに挿入し、状態が変化したときに新しいオブジェクト ツリーを再構築します。次に、新しいツリーと古いツリーを比較し、2 つのツリー間の差異を記録し、ステップ 2 で記録した差異をステップ 1 で構築された実際の DOM ツリーに適用すると、ビューが更新されます。
4. React diff の原則
ツリー構造を階層的に分解し、同じレベルの要素のみを比較します。比較を容易にするために、リスト構造の各ユニットに一意のキー属性を追加します。React は同じクラスのコンポーネントのみに一致します (ここでのクラスはコンポーネントの名前を指します)。マージ操作でコンポーネントの setState メソッドを呼び出すと、React はそのコンポーネントをダーティとしてマークします。各イベント ループの最後で, React はダーティなマークをすべてチェックします、コンポーネントの再描画、選択的なサブツリーのレンダリング。開発者は shouldComponentUpdate をオーバーライドして diff パフォーマンスを向上させることができます。
5. React における ref の役割は何ですか?
Ref は、DOM 要素またはコンポーネント インスタンスに安全にアクセスするために React が提供するハンドルです。要素に ref 属性を追加し、コールバック関数で DOM ツリー内の要素のハンドルを受け入れることができ、この値はコールバック関数の最初のパラメーターとして返されます。
6. プレゼンテーション コンポーネントとコンテナ コンポーネントの違いは何ですか?
プレゼンテーション コンポーネントは、コンポーネントがどのように見えるかを考慮します。Display は特に props を介してデータとコールバックを受け取り、独自の状態を持つことはほとんどありませんが、表示コンポーネントが独自の状態を持つ場合、通常はデータの状態ではなく UI の状態のみを考慮します。コンテナコンポーネントは、コンポーネントがどのように動作するかに重点を置いています。コンテナ コンポーネントは、プレゼンテーション コンポーネントまたは他のコンテナ コンポーネントにデータと動作を提供し、アクションを呼び出し、プレゼンテーション コンポーネントへのコールバックとして提供します。コンテナ コンポーネントは (他のコンポーネントの) データのソースであるため、多くの場合ステートフルです。
7. クラスコンポーネントと機能コンポーネントの違いは何ですか?
クラス コンポーネントを使用すると、コンポーネント自身の状態やライフ サイクル フックなどの追加機能を使用できるだけでなく、コンポーネントがストアに直接アクセスして状態を維持できるようになります。ページ、コンポーネント これは「ステートレス コンポーネント」であり、純粋な関数を使用して作成できます。このようなコンポーネントは、ダム コンポーネントまたはプレゼンテーション コンポーネントとも呼ばれます。
8. createElement と cloneElement の違いは何ですか?
React.createElement(): JSX 構文は React.createElement() を使用して React 要素を構築します。3 つのパラメータを受け入れます。最初のパラメータはタグ名にすることができます。div、span、React コンポーネントなど。2 番目のパラメーターは、渡される属性です。3 番目以降のパラメータはすべてコンポーネントのサブコンポーネントです。
React.createElement(
type,
[props],
[...children]
)
React.cloneElement() は React.createElement() に似ていますが、渡す最初のパラメーターがタグ名やコンポーネントではなく React 要素である点が異なります。新しく追加された属性は元の属性にマージされ、返された新しい要素に渡され、古い子要素は置き換えられます。
React.cloneElement(
要素,
[props],
[...children]
)
9. フラックスのアイデアを簡単に説明します
Fluxの最大の特徴はデータの「一方通行」です。ユーザーがビューにアクセスします。ビューはユーザーのアクションを送信します。ディスパッチャーはアクションを受信し、それに応じてストアを更新するように要求します。ストアが更新された後、「change」イベントを送信します。ビューが「change」イベントを受信した後、ページを更新します。
10. redux をご存知ですか? redux について話しましょう。
Redux はアプリケーション データ フロー フレームワークです。主にコンポーネント間の状態共有の問題を解決します。原則は集中管理です。主に 3 つのコア メソッド、アクション、ストア、リデューサーがあります。ワークフローは、ビューがストア、アクションを受け取り、それをストアに渡します。リデューサーは状態操作を実行し、ビューはストアによって提供される getState を通じて最新のデータを取得します。データ操作にも Flux が使用されます。これには 4 つのコンポーネントがあります: アクション、ディスパッチ、ビュー、およびストア。ワークフローは、ビューがアクションを送信し、ディスパッチャーがそれを受信するというものです。アクションにより、ストアはデータを更新できます。更新が完了すると、ストアは変更を発行し、ビューはその変更を受け入れてビューを更新します。Redux は Flux に非常に似ています。主な違いは、Flux にはアプリケーションの状態を変更できる複数のストアがあることです。Flux では、登録されたコールバック イベントにデータを渡すためにディスパッチャが使用されますが、redux では、状態を更新できるストアは 1 つだけ定義できます。Redux は、ストアとディスパッチャーの構造がよりシンプルかつ明確になりました
新しい状態により、状態の管理がより明確になります。redux により、プロセスがより標準化され、手動コーディングの量が削減され、コーディング効率が向上します。同時に、欠点は、データが更新されるとコンポーネントが失われる場合があることです。は必要ありませんが、再描画する必要があるため、効率に多少の影響があります。一般に、複数のインタラクションと複数のデータ フローを含む複雑なプロジェクト アプリケーションを構築する場合にこれらを使用します。
11.JSXとは何ですか?
JSX は JavaScript XML です。React コンポーネント内でタグを構築するための XML に似た構文。JSX は、react.js 用に開発された糖衣構文のセットであり、react.js の基礎でもあります。React は JSX を使用しなくても動作しますが、JSX を使用するとコンポーネントの可読性が向上するため、JSX の使用をお勧めします。
アドバンテージ：
1. 使い慣れた構文を使用して HTML 要素ツリーを定義できるようにします。
2. より多くのセマンティックラベルとモバイルラベルを提供します。
3. プログラム構造が視覚化されやすくなります。
4. React Element の作成プロセスを抽象化します。
5. HTML タグとこれらのタグを生成するコードはいつでも制御できます。
6. ネイティブ JavaScript です。
12. React フックとは何ですか?
Hook は、React 機能に「フック」できる特別な関数です。たとえば、useState は React 関数コンポーネントに状態を追加できるようにするフックです。機能コンポーネントを作成していて、それに何らかの状態を追加する必要があることに気付いた場合、以前のやり方では残りをクラスに変換する必要がありました。既存の関数コンポーネントでフックを使用できるようになりました。
フックの利点: 複雑な DOM 構造が必要なく、シンプルで理解しやすい
これにより、クラスを作成せずに状態や React のその他の機能を操作できるようになります。フックはコンポーネントを作成するもう 1 つの方法であり、コンポーネントの作成をより簡単かつ便利にします。同時に、フックをカスタマイズして共通のロジックを抽出し、複数のコンポーネント間でロジックを共有できるようにすることもできます。
13. クラスコンポーネントの欠点は何ですか?
1. ライフサイクルが肥大化し、論理的に結合されている。
2. ロジックの再利用は困難です。継承による解決は多重継承をサポートしていません。上位コンポーネントを通じて解決すると、追加のコンポーネントのネストが追加されます。レンダリング プロパティを通じて解決すると、追加のコンポーネントのネストも追加され、階層が肥大化します。
3. クラスにはこのポインティングの問題があり、匿名関数がそれを解決します。新しい関数が作成されるたびに、サブコンポーネントが不必要に繰り返しレンダリングされます。バインドはそれを解決し、論理状態とは関係のない大量のコードを記述する必要があります。