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 では、、、<select> などのフォーム要素は独自の状態を維持し、ユーザー入力に基づいて更新します。ユーザーがフォームを送信すると、前述の要素の値がフォームとともに送信されます。しかし、React では少し異なり、form 要素を含むコンポーネントは状態の入力値を追跡し、onChange などのコールバック関数が呼び出されるたびに状態が更新され、コンポーネントが再レンダリングされます。このように React によって値が制御される入力フォーム要素を「制御対象要素」と呼びます。 </p> <p style="text-align:left;">22. React における ref の役割は何ですか? </p> <p style="text-align:left;">回答: Ref を使用して、DOM ノードまたは React コンポーネントへの参照を取得できます。 ref を使用する場合の良い例としては、フォーカス/テキスト選択の管理、コマンド アニメーションのトリガー、サードパーティの DOM ライブラリとの統合などが挙げられます。 String Ref とインライン ref コールバックの使用は避けてください。 Refs コールバックは React によって推奨されています。 </p> <p style="text-align:left;">23. 高次成分とは何ですか? </p> <p style="text-align:left;">回答: 高次コンポーネントは、コンポーネントをパラメータとして受け取り、新しいコンポーネントを返す関数です。 HOC を使用すると、コード、ロジック、およびブートストラップ抽象化を再利用できます。最も一般的なのは、おそらく Redux の接続機能です。 HOC の最善の方法は、ツール ライブラリと単純な構成を単純に共有することに加えて、React コンポーネント間で動作を共有することです。同じことを行うために別の場所に多くのコードを書いていることに気付いた場合は、コードを再利用可能な HOC にリファクタリングすることを検討する必要があります。 </p> <p style="text-align:left;">24. アロー関数を使用する利点は何ですか? </p> <p style="text-align:left;">回答: 1. スコープの安全性: アロー関数の前に、新しく作成された各関数には独自の this 値があります (コンストラクターでは、これは新しいオブジェクトです。厳密モードの関数呼び出しでは、これは未定義です。関数が「オブジェクト メソッド」と呼ばれる場合は、基礎となるオブジェクトなど)、アロー関数はそうではなく、囲んでいる実行コンテキストの this 値を使用します。 </p> <p style="text-align:left;">2. シンプル: アロー関数は読み書きが簡単です </p> <p style="text-align:left;">3. 明確: すべてがアロー関数であれば、通常の関数をすぐに使用してスコープを定義できます。開発者はいつでも、次に上位の関数ステートメントを探して this</p> <p style="text-align:left;">25 の値を確認できます。setState に渡されるパラメーターがオブジェクトではなくコールバックであることが推奨されるのはなぜですか? </p> <p style="text-align:left;">回答: this.props と this.state の更新は非同期である可能性があるため、次の状態を計算するためにそれらの値に依存することはできません。 </p> <p style="text-align:left;">26. コンストラクターでこれをバインドする以外に、何か方法はありますか? </p> <p style="text-align:left;">回答: プロパティ初期化子を使用してコールバックを正しくバインドでき、create-react-app もデフォルトでサポートしています。コールバックではアロー関数を使用できますが、問題は、コンポーネントがレンダリングされるたびに新しいコールバックが作成されることです。 </p> <p style="text-align:left;">27. コンポーネントのレンダリングを防ぐにはどうすればよいですか? </p> <p style="text-align:left;">回答: コンポーネントの render メソッドで null を返しても、トリガーされたコンポーネントのライフサイクル メソッドには影響しません</p> <p style="text-align:left;">28. リストをレンダリングするとき、キーは何ですか?キーを設定する目的は何ですか? </p> <p style="text-align:left;">回答: キーは、どの項目が変更、追加、削除されたかを React が識別するのに役立ちます。 (DOM) 要素に安定した ID を与えるために、配列内の要素にキーを割り当てる必要があります。キーを選択する最良の方法は、リスト項目を一意に識別する文字列を使用することです。多くの場合、データ内の ID をキーとして使用します。レンダリングされるアイテムの安定した ID がない場合、レンダリングされるアイテムのキーとしてアイテム インデックスを使用できますが、この方法はお勧めできません。 </p>#29. (コンストラクター内で) super(props) を呼び出す目的は何ですか? <p style="text-align:left;"></p> <p style="text-align:left;">回答: super() が呼び出される前にサブクラスはこれを使用できません。ES2015 では、サブクラスはコンストラクターで super() を呼び出す必要があります。 props を super() に渡す理由は、コンストラクター (サブクラス内) での this.props へのアクセスを容易にするためです。 </p> <p style="text-align:left;">30. JSX とは何ですか? </p> <p style="text-align:left;">回答: JSX は JavaScript 構文の構文拡張であり、JavaScript のすべての機能を備えています。 JSX は React の「要素」を生成し、任意の JavaScript 式を中括弧で囲んで JSX に埋め込むことができます。コンパイル後、JSX 式は通常の JavaScript オブジェクトになります。つまり、if ステートメントおよび for ループ内で JSX を使用し、変数に代入し、引数として受け入れ、関数から返すことができます。 </p> <p style="text-align:left;">31子供とは何ですか? </p> <p style="text-align:left;">回答: JSX 式では、開始タグ (<a> など) と終了タグ (</a> など) の間の内容は、特別な属性 props.children として自動的に扱われます。含まれるコンポーネントに渡されます。 </p> <p style="text-align:left;">このプロパティには、React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray など、多くのメソッドが使用できます。 </p> <p style="text-align:left;">32. React では状態とは何ですか? </p> <p style="text-align:left;">回答: 状態はプロパティに似ていますが、プライベートであり、コンポーネント自体によって完全に制御されます。状態は本質的に、データを保持し、コンポーネントがどのようにレンダリングされるかを決定するオブジェクトです。 </p> <p style="text-align:left;">33. create-react-app の依存関係から抜け出す理由は何ですか? </p> <p style="text-align:left;">回答: Webpack または Babel のプリセットを構成したい場合。 </p> <p style="text-align:left;">34. redux とは何ですか? </p> <p style="text-align:left;">回答: Redux の基本的な考え方は、アプリケーション全体の状態を 1 つのストアに保持することです。ストアは単純な JavaScript オブジェクトであり、アプリケーションの状態を変更する唯一の方法は、アプリケーション内でアクションをトリガーし、状態を変更するこれらのアクションのリデューサーを作成することです。状態変換全体はリデューサー内で完了するため、副作用はありません</p> <p style="text-align:left;">35. Redux では、ストアとは何ですか? </p> <p style="text-align:left;">回答: Store は、アプリケーション全体の状態を保存する JavaScript オブジェクトです。同時に、Store は次の責任も負います。 </p> <ol> <li>getState() を通じてステートへのアクセスを許可する </li> <li>dispatch(action) を通じてステートを実行する</li> <li>subscribe を通じてステートを実行する(listener) ) リスナーを登録します</li> <li>subscribe(listener)によって返された関数を通じてリスナーのメモを処理します</li> </ol> <p style="text-align:left;">36. アクションとは何ですか? </p> <p style="text-align:left;">回答: アクションは純粋な JavaScript オブジェクトであり、実行されるアクションのタイプを示す type 属性が必要です。基本的に、アクションはアプリケーションからストアにデータを送信するペイロードです。 </p> <p style="text-align:left;">37.減速機とは何ですか? </p> <p style="text-align:left;">回答: リデューサーは、前の状態とアクションをパラメーターとして受け取り、次の状態を返す純粋な関数です。 </p> <p style="text-align:left;">38. Redux Thunk の機能は何ですか? </p> <p style="text-align:left;">回答: Redux thunk は、アクションの代わりに関数を返すアクション クリエーターを作成できるミドルウェアです。特定の条件が満たされた場合、サンクを使用してアクション (ディスパッチ) のディスパッチを遅延させることができ、非同期アクション (ディスパッチ) のディスパッチを処理できます。 </p> <p style="text-align:left;">39. 純粋関数とは何ですか? </p> <p style="text-align: left;">回答: 純粋関数とは、スコープ外の変数に依存せず、変数の状態を変更しない関数です。これは、純粋関数が同じパラメーターに対して常に同じ結果を返すことも意味します。 </p> <p>プログラミング関連のコンテンツの詳細については、php 中国語 Web サイトの <a href="https://www.php.cn/course.html" target="_blank">プログラミング入門</a> 列に注目してください。 </p><p>以上がReact に関するよくある面接の質問 (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="面接の基本的な質問に答える (共有)" href="https://m.php.cn/ja/faq/457310.html">面接の基本的な質問に答える (共有)</a></span><span>次の記事：<a class="dBlack" title="面接の基本的な質問に答える (共有)" href="https://m.php.cn/ja/faq/457313.html">面接の基本的な質問に答える (共有)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/437082.html" title="React を始めるためのナレッジポイントをまとめたもの" class="aBlack">React を始めるためのナレッジポイントをまとめたもの</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/443041.html" title="React でデータを取得する方法とその利点と欠点についての簡単な説明" class="aBlack">React でデータを取得する方法とその利点と欠点についての簡単な説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/446810.html" title="vscodeで反応する開発方法" class="aBlack">vscodeで反応する開発方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/453128.html" title="Java Reactor リアクター パターン" class="aBlack">Java Reactor リアクター パターン</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/454555.html" title="React を知ってマスターする必要がある 35 の面接の質問" class="aBlack">React を知ってマスターする必要がある 35 の面接の質問</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>