フロントエンド面接の質問 (5.1) (20 の質問)

---

1. React ライフサイクルの落とし穴を教えてください。それを避ける方法は？

• getDerivedStateFromProps制御されているコンポーネントと制御されていないコンポーネントの区別をあいまいにするアンチパターンのコーディングが容易

• componentWillMountReactこれは非推奨としてマークされており、推奨されていません. 主な理由は、新しい非同期アーキテクチャにより複数回呼び出されるため、ネットワーク要求とイベントバインディングcomponentDidMountをに配置する必要があるためです.

• componentWillReceivePropsまた、主にパフォーマンスの問題により、非推奨getDerivedStateFromPropsとマークされ、。

• shouldComponentUpdatetrueまたはを返すことによって、false新しいレンダリングをトリガーする必要があるかどうかを判断します。主にパフォーマンスの最適化に使用されます。

• componentWillUpdateまた、新しい非同期レンダリング メカニズムのため、廃止され、推奨されません. 元のロジックを組み合わせgetSnapshotBeforeUpdateてcomponentDidUpdate変更することができます.

componentWillUnmount関数でイベントのバインドを解除し忘れたり、タイマーやその他のクリーニング操作をキャンセルしたりすると、簡単に発生しますbug。

エラー境界処理を追加しないと、レンダリングで例外が発生した場合、操作不能な白い画面が表示されるため、必ず追加してください。

2. Real diff アルゴリズムの仕組みを教えてください。

詳細リンクアドレス

3. 調整段階で setState は何をしますか?

(1)setState関数、React受信パラメーター オブジェクトがコンポーネントの現在の状態とマージされ、いわゆる調整プロセス ( Reconciliation) がトリガーされます。
(2) 調整プロセスの後、要素Reactツリーは比較的効率的な方法で新しい状態に従って構築され、UI インターフェイス全体が再レンダリングされます; (3) 要素ツリーが取得された、新しいツリーと古いツリーが自動的に計算され、差異に応じてインターフェイスの再レンダリングが最小限に抑えられます; (4) 差異計算アルゴリズムでは、どの位置がどのように変化したかを比較的正確に知ることができます。これにより、完全な再レンダリングではなく、オンデマンドの更新が保証されます。React
ReactReact
React

4. redux の実現原理について話し、コアコードを書きますか?

原理

1. アプリケーションの状態を一元的に管理しstateます。storestate
2. reducer関数は、使用済みのものをstate更新するために新しいものを返すことです。storestate
3. redux原則によれば、UI层各状態の変更はactiongoによってトリガーされ、action対応する に渡されreducer、reducer新しいstateupdatestoreに返されstate、状態の更新が完了する必要があります。
4. subscribeこれはstoreサブスクリプションリスナー関数であり、これらのサブスクライブされたリスナー関数は、dipatch各開始後に順次実行されます。
5. ミドルウェアを追加して提出物dispatchを書き換えることができます

コア API

1. createStoreリポジトリを作成し、reducer引数として受け入れます
2. bindActionCreatorバインディングstore.dispatchとactionの関係
3. combineReducers複数のマージreducers
4. applyMiddlewareタマネギモデル用ミドルウェア、Between dispatchand actionBetween、リライトdispatch
5. compose複数のミドルウェアを統合

5. React 合成イベントの原理は何ですか?

Reactdivクリック イベントを実際のイベントに結び付ける代わりにDOM、documentここでサポートされているすべてのイベントをリッスンし、イベントが発生してどこにでもバブルが発生するとdocument、Reactイベントの内容がカプセル化され、実際の処理関数に渡されて実行されます。

収集されたイベントは配列に配置されdispatchQueue、バブリングとキャプチャの違いは実行のタイミングと順序にある​​ため、異なる順序で配列をループするだけで済みます

まず、fiberノードがrenderステージに入るとcomplete、イベント リスナーがrootそれにバインドされます。次に、イベント バインディングを呼び出しensureListeningTo、イベント合成オブジェクトを生成し、イベントを収集して、実際のイベントをトリガーします。

6. React コンポーネント間の通信方法は?

1. 親コンポーネントから子コンポーネントへの通信:
   親コンポーネントは、子コンポーネントに渡す方法で子コ​​ンポーネントとprops通信できます。

2. 子コンポーネントから親コンポーネントへの通信:
   props +Callback メソッド、親コンポーネントが子コンポーネントと通信するprops、これはpropsスコープが親コンポーネント自体である関数であり、子コンポーネントはこの関数を呼び出し、子コンポーネントが渡したい情報はパラメータとして使用され、親コンポーネントのスコープに渡されます。

3. 兄弟コンポーネント通信:
   兄弟コンポーネント間で転送し、親コンポーネントを使用して転送することにより、親コンポーネントが中間層として機能し、データ相互通信を実現します。 例: コンポーネント A
   – 値を渡す --> 親コンポーネント – 値を渡す -->コンポーネント B

4. クロスレベル通信:
   Context設計目的は、
   コンポーネント ツリーの「グローバル」なデータを共有することです.
   これを使用すると、contextコンポーネント間の通信方法が提供され、データを共有でき、他のデータは対応するデータを読み取ることができます
   .ユーザー、サブジェクト、または優先言語は、複数のレイヤー間でグローバル データContextを通信する。

5. パブリッシュ-サブスクライバー モード:
   パブリッシャーはイベントをパブリッシュし、サブスクライバーはイベントをリッスンして応答します。eventモジュールを導入することで通信できます。

6. グローバル状態管理ツール:グローバル状態センターを維持し、さまざまなイベントに応じて新しい状態を生成する、またはなどのグローバル状態管理ツール
   と通信します。ReduxMobxStore

7. 反応要素に $$type 属性があるのはなぜですか?

を防ぐのが目的XSS 攻击です。Synbolシリアル化できないため、現在のオブジェクトがデータベースからのものか、それ自体で生成されたものかは、属性Reactの有無によって判断できます。この属性がない場合、要素の処理は拒否されます。$$typeofelement
$$typeofreact

8. Connect コンポーネントの原理について教えてください。

connectこれは高階関数であり、実際にReduxはReactコンテナー コンポーネントの外層に接続してラップされProvider、上記によって提供されたand をstore受け取り、それをコンストラクターに渡し、オブジェクトを返し、それをコンテナー コンポーネントに渡します。プロパティの形式。原則:最初に,を渡し、次に生成された関数 ( )を返し、次にパラメータとして実数を渡すことで、ラップされたコンポーネントが生成されます。statedispatch

mapStateToPropsmapDispatchToPropsComponentwrapWithConnectComponentwrapWithConnectConnect

(1) を含むprops.store祖先Component( store
2)を組み合わせて を取得し、実体に渡す( 3)ページ インタラクションを実現するイベントを追加する(4)レンダリングを回避してページのパフォーマンスを向上させるかどうかを判断し、取得する(5)登録したイベントを削除する場合propsstatePropsdispatchPropsparentPropsnextStatepropsComponent
componentDidMountthis.store.subscribe(this.handleChange)
shouldComponentUpdatenextState
componentWillUnmountthis.handleChange

9. ファイバー アーキテクチャについての理解を教えてください。それはどのような問題を解決しましたか？

解決すべき問題:
JavaScriptエンジンとページ レンダリング エンジンの 2 つのスレッドは相互に排他的です. スレッドの 1 つが実行されると、他のスレッドはハングして待機することしかできません.JavaScriptスレッドが、レンダリング レベルの更新を実行できません。長時間待たないでください。インターフェイスが長時間更新されないため、ページの応答性が低下し、ユーザーが立ち往生する可能性があります。

理解:
React Fiberこれは、主要な変更と最適化Reactが行われ、Reactコア アルゴリズムが再実装されたものです。

主に行われた:

• それぞれに優先度が追加され、優先度の高いタスクは優先度の低いタスクに割り込むことができます。その後再起動、優先度の低いタスクの再実行に注意
• requestIdleCallback apiブラウザがアイドル状態のときに実行される非同期タスクの呼び出しを追加
• dom diffツリーはリンクされたリストになり、1 つがdom2 つに対応しfiber(リンクされたリスト)、2 つのキューに対応し、すべて中断されたタスクを見つけて再実行します。

10. redux ミドルウェアについての理解を教えてください。一般的に使用されるミドルウェアは何ですか? 実施原則？

理解：

ミドルウェアとは、アプリケーションシステムとシステムソフトウェアの間のソフトウェアの一種で、システムソフトウェアが提供する基本的なサービス（機能）を利用して、アプリケーションシステムの各部分やネットワーク上の異なるアプリケーションを接続し、リソースの共有と機能の共有を実現します。の目標

Reduxプロセスでは、ミドルウェアをdispatchプロセスに配置し、action傍受プロセスをディストリビューションで実行します。

基本的に関数であり、発行と実行の 2 つのステップの間にstore.dispatchメソッドが変換されAction、他の関数が追加されます。Reducer

一般的に使用されるミドルウェア:

redux-thunk: 非同期操作用
redux-logger: ロギング用

実装原則:

すべてのミドルウェアは配列に入れられchain、ネストされて実行され、最後に実行されますstore.dispatch。middlewareAPIミドルウェアの内部 ( ) を取得できgetState、dispatchこれら 2 つのメソッドがdispatch判断を下し、対応する操作を実行することがわかります。

11. React パフォーマンス最適化の手段は何ですか?

1. 純粋なコンポーネントを使用してください。
2. コンポーネント メモリ (高レベル コンポーネント)React.memoに使用します。同じ入力に対して、実行を繰り返さないでください。React.memo
3. クラス コンポーネントの場合は、shouldComponentUpdateライフ サイクル イベントを使用します (これは、コンポーネントを再レンダリングする前にトリガーされるライフ サイクル イベントの 1 つです)。このイベントを使用して、いつコンポーネントを再レンダリングする必要があるかを判断できます。
4. 遅延読み込みをルーティングします。
5. React Fragments余分なマークアップを避けるために使用します。
6. インライン関数定義を使用しないでください (インライン関数を使用すると、render" " 関数が呼び出されるたびに新しい関数インスタンスが作成されます)。
7. Willxxxシリーズのライフサイクル中は、非同期のリクエストや操作などを避けてくださいdom。
8. クラス コンポーネントの場合、イベント関数はポインターを変更するConstructorようにバインドされています。bindthis
9. インライン スタイル属性の使用は避けてください。
10. Reactでの条件付きレンダリングの最適化。
11. renderメソッドでデータをエクスポートしないでください。
12. リストがレンダリングされるときに追加されますkey。
13. 関数コンポーネントでuseCallbackandを使用しuseMemoてコンポーネントを最適化します。依存関係に変更がない場合、繰り返し実行されません。
14. クラス コンポーネントで使用されるオブジェクトimmutable。

12. イベント ループについての理解を教えてください。

js でタスクを処理するための特定の操作メカニズムであるイベント ループ。
非同期タスクと同期タスクを実行すると、非同期実行が開始された後、次の同期タスクを実行できません. イベント ループは、タスクを同期タスクと非同期タスクに分割します. 同期タスクに遭遇した場合は、直接実行し、非同期タスクに遭遇します.メインスレッドの実行に影響を与えないように、タスクキューで実行します。
その中で、非同期タスク キューもマクロ タスクとマイクロ タスクに分けられ、マクロ タスクが最初に実行され、次にマイクロ タスクが実行されます。
このようにイベントループが繰り返し形成される。

13. フロントエンドのクロスドメイン ソリューション?

• jsonp によるクロスドメイン
• document.domain + iframe クロスドメイン
• location.hash + iframe window.name + iframe クロス ドメイン
• postMessage クロスドメイン
• クロスオリジン リソース共有 (CORS)
• nginx プロキシ クロスドメイン
• nodejs ミドルウェア プロキシ クロスドメイン
• クロスドメイン WebSocket プロトコル

14. 配列の一般的なメソッドと関数、少なくとも 15?

1. Array.length:配列内の要素数を取得または設定します
2. Array.from() :疑似配列または反復可能なオブジェクト ( arguments、Array、Map、... を含む) を配列オブジェクトに変換しますSet。String
3. Array.isArray():渡された値がArray
4. concat():2 つ以上の配列をマージする方法。このメソッドは既存の配列を変更しませんが、新しい配列を返します。
5. every(callback):メソッドは、配列のすべての要素が指定された関数のテストに合格するかどうかをテストします
6. filter():指定された関数によって満たされたテストのすべての要素を含む新しい配列を作成します
7. find():指定されたテスト関数を満たす配列内の最初の要素の値を返します
8. forEach():メソッドは、配列の要素ごとに指定された関数を 1 回実行します
9. includes():配列に指定された値が含まれているかtrueどうfalse
10. indexOf():指定された要素が見つかる配列内の最初のインデックスを返します。存在しない場合は -1 を返します。
11. join():配列 (または配列のようなオブジェクト) のすべての要素を文字列に連結します
12. lastIndexOf():指定された要素 (つまり、有効なJavaScript値。存在しない場合は -1 を返します。配列の後ろから前を向く
13. map():配列内の各要素に対して指定された関数を呼び出した結果が結果となる新しい配列を作成します
14. pop():配列から最後の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します
15. push():配列の末尾に 1 つ以上の要素を追加します
16. reduce():アキュムレータと配列内の各要素に関数を適用します (左から右へ)
17. shift():配列から最初の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します
18. slice():最初から最後まで (最後を含まない) 選択された配列の一部の浅いコピーを新しい配列オブジェクトに返します
19. some():配列内の特定の要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。
20. sort():配列の要素を位置でソートし、配列を返します。
21. splice():既存の要素を削除したり、新しい要素を追加したりして、配列の内容を変更します
22. toString():指定された配列とその要素を表す文字列を返します
23. unshift():配列の先頭に 1 つ以上の要素を追加し、新しい配列の長さを返します
24. toLocaleString():配列内の要素を表す文字列を返します。配列内の要素はそれぞれのtoLocaleStringメソッド、これらの文字列はロケール固有の文字列 (カンマ「,」など) で区切られます。

15. React render メソッドの原理、いつトリガーされますか?

原則:
クラス コンポーネントではrender関数はrenderメソッドを参照し、関数コンポーネントでは関数コンポーネント全体を参照します。

render関数内のステートメントはjsx、使い慣れた js コードにコンパイルされます. このrenderプロセスでは、react新しく呼び出されたrender関数によって返されたツリーが古いバージョンのツリーと比較されます. このステップは、どのように実行するかを決定するために必要なステップです. DOM を更新し、DOM ツリーをdiff比較し更新する

トリガーのタイミング:

クラス コンポーネントの呼び出しにより、状態がsetState変更されます

関数コンポーネントはuseState hook状態を次のように変更します

一度実行すると、メソッドsetStateが実行され、現在の値が変更されたかどうかでメソッドを実行するかどうかが判断されます. 親コンポーネントがレンダリングされると、子コンポーネントもレンダリングされます.renderuseStaterender

16. Vue での mixin の理解について教えてください。

mixinこれはのファイルであるクラスであり、その主な機能はそれを汎用モジュールとして参照することvueです。jsプロジェクト内では、コントロール要素の表示と非表示など、異なるコンポーネントが同じ機能を持っている場合があるため、それらの変数とルールもまったく同じである場合は、この機能を個別に抽出して挿入し、インポートすることができますmixin.js。同じ機能を実現できます。導入方法もグローバルミックスインとローカルミックスインに分かれており、ローカルミックスインはコンポーネントごとに、グローバルミックスインはmain.jsにVue.mixin()導入されています。

17. for...in ループと for...of ループの違いは何ですか?

for...inループ：キーの値ではなく、オブジェクトのキー名しか取得できない
for…inループにはいくつかのデメリットがある
　　①配列のキー名は数字だが、for…inループはキー名として文字列を使う 「0」、「1」、 「2」など。
　　②for…inループは数字キーの名前だけでなく、手動で追加された他のキーも横断します。プロトタイプ チェーンのキーも含まれます。
　　③場合によっては、for…inループはキー名を任意の順序でトラバースします。
　　for…inループは主に、配列ではなくオブジェクトを反復処理するために設計されています。
　　
for...ofループ: トラバーサルでキーと値の
for…ofループを取得できるようにします。
　　① はfor…in同じ簡潔な構文ですが、for…inこれらの欠点はありません。
　　②方法とは異なり、 、 、とforEach組み合わせて使用​​できます。 　　③すべてのデータ構造を横断するための統一された操作インターフェースを提供するbreakcontinuereturn

18. Js のデータ型を判断する方法は? 少なくとも 5 つ名前を付けますか? 違いは何ですか？

1.typeof
typeof返された型が文字列であると判断する
2.Constructor
instanceconstructor属性がコンストラクタ自身を指している
constructor判断方法はinstanceof似ていますが、constructor検出方法が異なりObjectますinstanceof.constructorオブジェクト型
3.Instanceof
instanceof型かどうかを判断できる インスタンスのコンストラクタです.
instanceofその後にオブジェクト型が続く必要があり, 大文字小文字を間違えてはなりません. この方法は, 条件付き選択や分岐に適しています.
4. 型Object.prototype.toString.call()
のプロトタイプ オブジェクトがオブジェクトのプロトタイプ チェーン上にあるかどうかの判断
5.objectプロトタイプのメソッドによる判断、
たとえばarray.isArray()配列であるかどうかの判断
6. === (厳密な演算子) は
通常、私たちの条件判定、データ型の判定に使用すると、変数が空かどうか、変数がデータかどうかなどの判定など、非常に限定的になります。

19. Object.defineProperty() についての理解を教えてください。

Object.defineProperty()メソッドは、オブジェクトで直接新しいプロパティを定義するか、オブジェクトの既存のプロパティを変更して、オブジェクトを返します。

このメソッドは 3 つのパラメーターを受け入れます

• 最初のパラメーターは次のとおりですobj。プロパティが定義されるオブジェクト、
• 2 番目のパラメーターは次のとおりですprop。定義または変更するプロパティの名前またはSymbol、
• 3 番目のパラメーターは次のとおりですdescriptor。定義または変更する属性記述子

関数の 3 番目のパラメーターdescriptorで表される属性記述子には、データ記述子とアクセス記述子の2 つの形式があります。

• データ記述子は値を持つ属性であり、書き込み可能または書き込み可能でない場合があります。
• アクセス記述子は、関数および関数によって記述される属性getterです。setter

記述子は、これら 2 つのいずれかのみであり、両方であることはできません。

これら 2 つのタイプには、次のキー値があります。

configurable:対象の属性を削除できるかどうか、または属性のプロパティを再度変更できるかどうか ( writable、configurable、enumerable)。true削除可能またはプロパティをリセットできるように設定します。 に設定するfalseと、削除可能またはプロパティをリセットできなくなります。デフォルトは ですfalse。

enumerable:プロパティのenumerableキー値がtrueオブジェクトの列挙プロパティに表示されます。デフォルトは ですfalse。

20. webSocket についての理解を教えてください。

Comprehensionは、次の新しいプロトコル
WebSocketです( protocol は基本的に、に基づくプロトコルです。HTML5websockettcp

ブラウザとサーバー間の全二重通信を実現し、サーバーのリソースと帯域幅をより節約し、リアルタイム通信の目的を達成できます

Websocket は永続的なプロトコルです

この原理
websocketでは、通信仕様が規定されており、ハンドシェイク メカニズムを使用して、クライアントとサーバー間で同様のtcp接続を確立し、それらの間の通信を容易にします。

それが現れる前はwebsocket、web相互作用は一般的にhttp协议短い接続または長い接続に基づいていました

websockethttp ステートレス プロトコルに属さない新しいプロトコルで、プロトコル名は「ws」です。