React に関するよくある面接の質問 (共有)
[関連トピックの推奨事項: 面接の質問に反応する (2020)]
1. redux ミドルウェア
答え: Middle Theソフトウェアは、アクション -> リデューサーをインターセプトするプロセスをカスタマイズするサードパーティのプラグイン モードを提供します。アクション -> ミドルウェア -> リデューサー になります。この仕組みにより、データの流れを変更し、非同期アクション、アクションのフィルタリング、ログ出力、例外レポートなどの機能を実装することができます。
一般的なミドルウェア: redux-logger: ログ出力を提供します。redux-thunk: 非同期操作を処理します。redux-promise: 非同期操作を処理します。actionCreator の戻り値は、promise
2, redux とはが欠点です。
回答: 1. コンポーネントに必要なデータは親コンポーネントから渡される必要があり、フラックスのようにストアから直接取得することはできません。
2. コンポーネントの関連データが更新されると、親コンポーネントがこのコンポーネントを使用する必要がない場合でも、親コンポーネントは再レンダリングされるため、効率に影響したり、複雑な記述が必要になる場合があります。判断のために shouldComponentUpdate を使用します。
3. React コンポーネントはビジネス コンポーネントと技術コンポーネントにどのように分割されますか?
回答: コンポーネントは通常、その役割に応じて UI コンポーネントとコンテナ コンポーネントに分類されます。 UI コンポーネントは UI のプレゼンテーションを担当し、コンテナ コンポーネントはデータとロジックの管理を担当します。この 2 つは、React-Redux が提供する connect メソッドを通じて接続されます。
4. React ライフサイクル関数
回答: 1. 初期化フェーズ:
getDefaultProps: インスタンスのデフォルトのプロパティを取得します
getInitialState: それぞれを取得しますインスタンスの初期化状態
componentWillMount: コンポーネントがページにロードされ、レンダリングされようとしています
render: コンポーネントがここに仮想 DOM ノードを生成します
componentDidMount: コンポーネントは
2. 実行状態:
componentWillReceiveProps: コンポーネントがプロパティを受信しようとしているときに呼び出されます
shouldComponentUpdate: コンポーネントが新しいプロパティまたは新しいプロパティを受信したときに呼び出されますstatus ( false を返す可能性があり、データ受信後に更新されず、レンダリングが呼び出されなくなり、後続の関数は実行されなくなります)
componentWillUpdate: コンポーネントは更新されようとしているため、プロパティとステータスを変更できません
render: コンポーネントの再レンダリング
componentDidUpdate: コンポーネントが更新されました
3. 破棄フェーズ:
componentWillUnmount: コンポーネントはまもなく更新されますdestroy
5. 反応パフォーマンスの最適化を行う周期関数はどれですか?
回答: shouldComponentUpdate このメソッドは、DOM を再描画するために render メソッドを呼び出す必要があるかどうかを判断するために使用されます。 DOM のレンダリングは多くのパフォーマンスを消費するため、より最適化された DOM diff アルゴリズムを shouldComponentUpdate メソッドで記述できれば、パフォーマンスを大幅に向上させることができます。
6. 仮想 dom はなぜパフォーマンスを向上させるのですか?
回答: 仮想 dom は、不要な dom 操作を回避するために dom diff アルゴリズムを使用して、js と実際の dom の間にキャッシュを追加するのと同じです。パフォーマンス。
具体的な実装手順は次のとおりです:
1. JavaScript オブジェクト構造を使用して DOM ツリーの構造を表し、このツリーを使用して実際の DOM ツリーを構築し、それをdocument;
2. 状態が変化したら、新しいオブジェクト ツリーを再構築します。次に、新しいツリーと古いツリーを比較し、2 つのツリー間の相違点を記録します。
ステップ 2 で記録した相違点をステップ 1 で構築した実際の DOM ツリーに適用すると、ビューが更新されます。
7. Diff アルゴリズム?
回答: 1. ツリー構造をレベルに従って分解し、同じレベルの要素のみを比較します。
2. 比較を容易にするために、リスト構造の各ユニットに一意のキー属性を追加します。
3. React は同じクラスのコンポーネントのみに一致します (ここでのクラスとはコンポーネントの名前を指します)
4. マージ操作で、コンポーネントの setState メソッドを呼び出すとき, React はダーティとしてマークされます。各イベント ループの最後で、React はダーティとしてマークされたすべてのコンポーネントをチェックし、それらを再描画します。選択的なサブツリーのレンダリング。開発者は shouldComponentUpdate をオーバーライドして diff パフォーマンスを向上させることができます。
8. React パフォーマンス最適化ソリューション答え: 1) 不要な DOM 操作を避けるために shouldComponentUpdate を書き換えます。
2) 実稼働バージョンのreact.jsを使用します。
3) キーを使用して、リスト内のすべてのサブコンポーネントの最小の変更を React が識別できるようにします
9. Flux のアイデアを簡単に説明します
回答: Flux の最大の特徴はデータフローの「一方向」。
1. ユーザーはビューにアクセスします
2. ビューはユーザーのアクションを発行します
3. ディスパッチャーはアクションを受け取り、それに応じてストアを更新する必要があります
4.Storeが更新された後、「change」イベントが発行されます
5.Viewが「change」イベントを受信した後、ページが更新されます
10.スキャフォールディングとはReact プロジェクトで使用されましたか? Mern? Yeoman?
回答: Mern: MERN は、Mongo、Express、React、NodeJS を使用して同型 JS アプリケーションを簡単に生成できるスキャフォールディング ツールです。インストール時間を最小限に抑え、実証済みのテクノロジーを使用して開発を迅速化します。
11. React をご存知ですか?
回答: はい、React は Facebook によって開発された軽量コンポーネント ライブラリです。MVC の V 層の問題であるフロントエンド ビュー層のいくつかの問題を解決するために使用されます。その内部 Instagram Web サイトReact を使用します。
12. React はどのような問題を解決しますか?
回答: 3 つの問題が解決されました: 1. コンポーネントの再利用の問題、2. パフォーマンスの問題、3. 互換性の問題:
13. React プロトコル?
回答: React が従う契約は、「BSD ライセンス特許取得済みオープンソース契約」です。この契約は非常に奇妙です。製品が Facebook と競合しない場合は、React を自由に使用できますが、競合がある場合は、 , React ライセンスは取り消されます
14. shouldComponentUpdate について理解していますか？
回答: React の仮想 dom テクノロジーでは、dom と仮想 dom の間の継続的な diff 比較が必要です。dom ツリーが大きい場合、この比較操作にはさらに時間がかかります。そのため、React では shouldComponentUpdate などのパッチ機能を提供しています。一部の変更について、コンポーネントを更新したくない場合、またはコンポーネントが更新されても以前と同じままである場合、この関数を使用して React に直接伝えることができ、差分操作の必要性がなくなり、効率がさらに向上します。
15. React はどのように機能しますか?
回答: React は仮想 DOM (仮想 DOM) を作成します。コンポーネントの状態が変化すると、React は最初に「差分」アルゴリズムを通じて仮想 DOM 内の変更をマークし、2 番目のステップは調整で、DOM は差分の結果で更新されます。
16. React を使用する利点は何ですか?
回答: 1. render 関数を見るだけで、コンポーネントがどのようにレンダリングされるかを簡単に知ることができます
2. JSX の導入により、コンポーネント コードがより読みやすく、簡単になります レイアウトを理解するコンポーネントの数、またはコンポーネントが相互に参照する方法
3. サーバー側レンダリングをサポートし、SEO とパフォーマンスを向上させることができます
4. テストが簡単
5. React View レイヤーのみに焦点を当てているため、他のフレームワーク (Backbone.js、Angular.js など) で使用できます。
17. プレゼンテーション コンポーネント (Presentational コンポーネント) とコンテナーには違いがあります。コンポーネント（コンテナコンポーネント）の違いは何ですか？
回答: 1. ディスプレイ コンポーネントは、コンポーネントがどのように見えるかを考慮します。 Display は特に props を介してデータとコールバックを受け入れ、独自の状態を持つことはほとんどありませんが、表示コンポーネントが独自の状態を持つ場合、通常はデータの状態ではなく UI の状態のみを考慮します。
2. コンテナ コンポーネントは、コンポーネントがどのように動作するかに重点を置いています。コンテナ コンポーネントは、プレゼンテーション コンポーネントまたは他のコンテナ コンポーネントにデータと動作を提供し、Flux アクションを呼び出し、プレゼンテーション コンポーネントへのコールバックとして提供します。コンテナ コンポーネントは (他のコンポーネントの) データ ソースであるため、多くの場合ステートフルです。
18. クラス コンポーネントと機能コンポーネントの違いは何ですか?
#回答: 1. クラス コンポーネントを使用すると、コンポーネント独自の状態やライフサイクル フックなどの追加機能を使用できるだけでなく、コンポーネントがストアに直接アクセスして状態を維持できるようになります2. コンポーネントが props のみを受け取り、コンポーネント自体をページにレンダリングする場合、そのコンポーネントは「ステートレス コンポーネント」であり、純粋な関数を使用して作成できます。このようなコンポーネントは、ダム コンポーネントまたはプレゼンテーション コンポーネントとも呼ばれます19. state (状態) と (コンポーネントの) props の違いは何ですか? 回答: 1. State は、コンポーネントのマウント時に必要なデータのデフォルト値に使用されるデータ構造です。状態は時間の経過とともに変化する可能性がありますが、ほとんどの場合、ユーザー イベントの動作の結果として変化します。2. Props (プロパティの略) はコンポーネントの構成です。小道具は親コンポーネントから子コンポーネントに渡され、子コンポーネントに関する限り、小道具は不変です。コンポーネントはそれ自身の props を変更できませんが、そのサブコンポーネントの props をまとめることはできます (統合管理)。小道具は単なるデータではありません。小道具を介してコールバック関数を渡すこともできます。
20. Ajax リクエストは React コンポーネントのどこで開始する必要がありますか?
回答: React コンポーネントでは、ネットワークリクエストはcomponentDidMountで開始する必要があります。このメソッドは、コンポーネントが最初に「マウント」される (DOM に追加される) ときに実行され、コンポーネントのライフサイクルで 1 回だけ実行されます。さらに重要なのは、コンポーネントがマウントされる前に Ajax リクエストが完了するという保証はありません。完了した場合、アンマウントされたコンポーネントに対して setState を呼び出そうとすることになりますが、これは機能しません。 ComponentDidMount でネットワーク要求を行うと、更新する準備ができているコンポーネントが存在することが保証されます。
21. 制御コンポーネントとは何ですか?
回答; HTML では、、