Reactインタビューで知っておくべきトップ50の質問と回答

ReactJS 開発者は非常に人気があり、それには十分な理由があります。ただし、仕事を得るには、フレームワークでの習熟度を証明する必要があります。

以下は、よくある React 開発に関する質問と、知っておくべき回答です。基本的な内容から高度なトピックまで網羅しています。

1.Reactとは？

Reactは無料でオープンソースのユーザーインターフェイス開発用の JavaScript ライブラリ。コンポーネントを使用して単一ページアプリケーションの出力を作成します。 React は Facebook (Meta) によって開発され、開発者コミュニティによって保守されています。

2. React の重要な機能を挙げる

React の最も重要な機能は次のとおりです。

使いやすさ
迅速な開発
コンポーネントの使用
Jsx
仮想DOM
高性能
一方向のデータバインディング

3. React のプロジェクトリポジトリはどこにありますか?

React は、次の場所にある単一リポジトリです。 https://github.com/facebook/react. 単一リポジトリであることは、開発と管理を容易にするために、すべてのコードとその他のソースが同じ場所に保存されることを意味します。

4. React の現在の安定版は何ですか?

14 年 2022 月 18.2.0 日以降の React の最新の安定版は XNUMX です。

5. React Native と ReactJS の違いを述べる

React と ReactJS は同じですが、React Native は React 上に構築されています。その違いとして、React は Web アプリケーション用の動的で応答性の高いユーザーインターフェイスの作成に使用されますが、React Native はアプリケーションをモバイルアプリとして構築するために設計されています。

6. 要素とコンポーネントの違いは何ですか?

React 要素は、DOM ノードを表すために作成されたシンプルで不変のオブジェクトです。不変であるということは、DOM にレンダリングされるため、一度作成されると変更できないことを意味します。一方、React コンポーネントは変更可能で、一度レンダリングすると JSX 出力を生成します。

7. コンポーネントはどのように作成しますか?

React でコンポーネントを作成するには、1.) 関数コンポーネントと 2.) クラスコンポーネントの XNUMX つの方法があります。名前が示すように、関数コンポーネントは関数宣言を使用して作成され、クラスコンポーネントはクラス宣言を使用して作成されます。

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. React コンポーネントの 4 つの段階を挙げてください

React コンポーネントは、そのライフサイクルで次の 4 つの段階を経ます。

初期 – 初期プロップを使用したデフォルト状態でのコンポーネントの構築
実装段階 – コンポーネントの JSX レンダリング
更新フェーズ – コンポーネントの状態の変化とアプリケーションの再描画
アンマウントフェーズ – DOM からのコンポーネントの削除

9. 高次コンポーネントの意味を説明してください

高次コンポーネント (HOC) は、コンポーネントを作成するための React 方法論です。既存のコンポーネントを使用して、追加機能を備えた新しいコンポーネントを作成します。つまり、HOC はコンポーネントを引数として受け取り、機能が追加された新しいコンポーネントを返す関数です。

10. 管理された構成要素と管理されていない構成要素とは何ですか?

制御されたコンポーネントは、props を介してその値を取得し、コールバックを介してシステムに変更を通知する React コンポーネントです。それを管理する親コンポーネントによって制御されます。状態値を props として制御対象コンポーネントに渡します。一方、制御されていないコンポーネントはその状態を管理するため、クエリを実行する必要があります。 DOM 参照その値を取得します。

11. React の Prop とは何ですか?

React の Props は単にプロパティを表す単純な方法であり、それによって、コンポーネントのプロパティを参照しています。 props は、親コンポーネントから XNUMX つ以上の子コンポーネントにデータを渡すために使用され、子コンポーネントに対して読み取り専用です。

12. props.children とは?

Props.children 属性には、開始タグと終了タグを持つコンポーネントのすべてのコンテンツに関する情報が含まれています。これらの子は、現在のコンポーネント内で定義されているすべての要素を参照し、XNUMX つ、複数、またはまったくない場合があります。

13. React で props を更新できますか?

いいえ、React の props はトップダウンで不変です。これは、コンポーネントが好きなプロパティをその子に送信できることを意味しますが、そのプロパティを更新することはできません。親のみが小道具を更新できます。

14.JSXとは何ですか?

JSX は JavaScript XML の略です。反応コード内に HTML を記述できるようにする JavaScript 構文拡張です。とにかくブラウザは JSX を理解しないので、React は JSX を読み取り可能な HTML コードにレンダリングする必要があります。

15. コンポーネントとエレメントの違いは何ですか

要素は、仮想 DOM ノードのステートレスで不変の定義です。タイプとプロパティの両方が含まれていますが、コンポーネントのようなメソッドはありません。このメソッドの欠如により、高速になります。

16. React の状態とは?

React の状態とは、コンポーネントに関する情報を保持および管理するために使用されるコンポーネント内の組み込みオブジェクトを指します。状態は時間の経過とともに変化する可能性があるため、そのコンポーネントの再レンダリングがトリガーされます。コンポーネントのコンストラクターメソッドで状態を定義する必要があります。そうしないと、コンポーネントはステートレスになります。

17. ステートレスコンポーネントとは何ですか?

ステートレスな React コンポーネントには状態がありません。これは、その状態を設定することもできないことを意味します this.setState() メソッドもレンダリングもしていません。ただし、ステートレスコンポーネントは props を持つことができます。

18. React で状態を更新するにはどうすればよいですか

コンポーネントの状態を更新するには、その this.setState() 方法。

19. React の Strict モードについて説明する

React の厳密モードは、開発者がコンポーネントのより深いレベルのチェックを有効にし、より多くの警告を強調表示することで、アプリケーションの潜在的な問題を発見するのに役立つツールです。 Strict モードは、開発モードでのみ使用できます。

20. React で状態を持ち上げるとはどういう意味ですか?

これは、子コンポーネントが親から共通の状態を共有できるようにすることを意味します。これにより、各子コンポーネントが共通の状態を個別に管理するよりも管理が容易になります。

21. React でデータを渡すにはどうすればよいですか?

props と callback を使用して、React でデータを渡します。 React の props は一方向であり、プロパティは親コンポーネントからその子にのみ渡すことができます。子コンポーネントから親にデータを渡すには、コールバック関数を使用する必要があります。

22.定義する Flux Reactで

Flux は、アプリケーション内のデータの流れを指示するための一方向の概念です。一方向であることは、データが親コンポーネントから子コンポーネントにのみ渡されることを意味します。 Flux には、アプリごとに複数のデータストアを含めることもできます。

23.定義する Reduxの Reactで

Redux は、アプリケーションの複雑な状態を管理するための便利なオープンソース JavaScript ライブラリです。これは独立しており、Angular などの他のフレームワークで使用できます。 Flux とは異なり、Redux はアプリケーションの状態管理を一元化するため、複雑な UI の構築が容易になります。

24.いつReduxを使うべきですか?

すべてのアプリに Redux が必要なわけではありません。ただし、次の条件で役立ちます。

アプリに大量のアプリケーション状態がある場合
アプリのロジックが複雑な場合
アプリのコードベースが大きい場合
アプリを頻繁に更新する必要がある場合
多くの人がアプリで作業している場合

25. Redux と Flux の主な違いは何ですか?

この XNUMX つの主な違いは、Redux では単一のストアからすべてのアプリケーションデータを管理するのに対し、Flux では複数のストアを使用できることです。

26. Redux のコンポーネントを列挙する

Redux には 4 つの主要な部分があります。

ストア – これは、アプリケーションの状態を保存する場所です。
行動 – これらは、アプリが Redux ストアにデータを送信する原因となるイベントです。
レデューサー – これは、現在のアプリの状態とアクションを引数として受け取り、結果として新しい状態を返す関数です。
ミドルウェア – この機能により、開発者はコンポーネントからすべてのアクションをレデューサー関数に到達する前にキャプチャできます。

27. React フックとは?

React フックは、状態データやレンダリングの更新など、さまざまな React 機能へのアクセスを可能にする関数コンポーネントの機能です。 React 16.8 で導入されました。

28. React のフックの種類を一覧表示する

React には、useState、useEffect、useContext などの基本的なフックから、useCallback、useReducer、useMemo、useRef などの追加のフックまで、15 以上のフックがあります。

29. フラグメントとは?

React フラグメントは、DOM に追加することなく、コンポーネント内の複数の子要素をグループ化する便利な方法です。以下を使用してタグを定義するだけです。

内部に必要なすべての子要素をロードします。唯一の違いは、短いバージョンの <> はキーと属性を受け入れないのに対し、長いバージョンは受け入れることです。

30. react-dom パッケージの主なメソッドを挙げてください

これらは、子を外部 DOM にレンダリングするための createPortal() と、更新をフラッシュするための flushSync() です。 React 18 以降、 createRoot() および hydrateRoot() に置き換えられた render() および hydrate() メソッドもあります。

31. React キーとは?

キーは、リストの管理に最適な一意の識別子です。キーを使用すると、リスト内の個々のアイテムを簡単に識別でき、各アイテムがいつ更新、削除、または何らかの方法で変更されたかを知ることができます。

32. React キーが重要なのはなぜですか?

キーは実際の DOM の効率的なレンダリングに役立つため、React では重要です。 React は、イベント後に再レンダリングするコンポーネントを最小限に抑えようとするため優れています。また、リストでキーを使用すると、React がリスト全体を再レンダリングする必要がなくなります。これは、大きなリストで問題になる可能性があります。

33. React のイベントとは?

イベントは、ユーザーまたはシステムから発生するアプリ内のアクションです。イベントは、マウスのクリックまたはモバイルデバイスでのタップから、ウィンドウのサイズ変更、キーの押下、ドラッグ、フォーカスなどにまで及びます。

34.何を説明してください合成イベント手段

合成イベントは、ブラウザのネイティブイベントのラッパーです。問題は、ブラウザによってイベントの名前が異なることです。 React は合成イベントを使用して、さまざまなブラウザーすべてに対して複数の実装とメソッドを作成しなければならないという問題を回避します。このようにして、React はすべての異なるブラウザーイベントの共通名を統一された API として維持します。

35. Webpack とは?

Webpack は、JavaScript と CSS ファイルを組み合わせて縮小するために使用されるモジュールバンドルシステムです。これは Node.js 上に構築されており、多数のファイルや、画像やフォントなどの非コードアセットを操作する場合に役立ちます。

36. create-react-app とは?

Create-react-app は、Node.js 環境で単一ページの React アプリケーションを作成するのに役立つツールです。基本的なアプリを起動するために必要なすべてのファイルとフォルダーを生成し、そこから取得します。これには、Node バージョン 14.0.0 以上と、ver からの npm が必要です。 5.6.

使い方は簡単です：

npx create-react-app myNewApp

cd myNewApp

npmスタート

37. React でサーバー側をレンダリングできますか?

はい、可能ですが、大規模なプロジェクトではリソースが大量に消費される可能性があります。サーバー側のレンダリングは、ユーザーエクスペリエンスを向上させ、 SEO。 Node.js 環境、Webpack のようなバンドラー、および Next.js とリミックスします実行時に React アプリをレンダリングします。リソースの集中使用に対する解決策は、静的サイトジェネレータ、Next.js ベースなどギャツビー.

38. アロー関数の機能を説明する

アロー関数は、関数を定義する簡単な方法です。これは、以下を置き換える ES6 の短縮形です。

= 関数() 　 ()=>.

例えば：

テスト=関数(){

return "これはテストです";

}

その後、次のようになります。

テスト = () => {

「これはテストです」を返します。

}

または単一行ステートメントの場合:

test = () => “これはテストです”;

39 は何ですか Reactルーター?

React ルーターは、React アプリでルーティング機能を提供するライブラリです。豊富なナビゲーションコンポーネントを簡単に組み込んで使用できるため、大規模または複雑なプロジェクトに非常に役立ちます。

40. React Router を使用する主な利点は何ですか?

アプリのさまざまな URL パスを作成し、window.location 値と履歴オブジェクトを提供します。

41.ComponentWillUnmount()とは?

これは、React がコンポーネントを破棄しようとするたびに呼び出されるコンポーネントメソッドです。クリーンアップ、タイマーのクリア、ネットワークリクエストのキャンセル、およびその他の重要な初期化の問題を処理するのに最適な場所です。

42. Constructor() とは?

コンストラクターは、コンポーネントの初期化中に呼び出されるコンポーネントのメソッドです。これは通常、ローカル状態の初期化とイベントハンドラーメソッドのバインドに使用されます。

43. 仮想 DOM とは?

React の仮想 DOM は、実際の HTML ドキュメントの DOM の軽量コピーです。これは、実際の DOM での変更の効率的な管理と更新に使用されます。

44. 実際の DOM に対する仮想 DOM の利点は何ですか?

仮想 DOM は軽量で、実際の DOM よりもレンダリングが高速です。これにより、最初に仮想 DOM をレンダリングし、必要な場合にのみ実際の DOM を変更する方が効率的になります。実際の DOM 上のすべてのノードには、仮想 DOM 上の対応するコンポーネントがあり、レンダリング後に仮想コンポーネントに変更があると、React はどの実際の HTML ノードを更新または削除するかを正確に認識します。

45.用語を説明してください和解 Reactで

Reconciliation は、必要な場合にのみ実際の DOM を更新する React の方法であり、実際の DOM で変更された正確なノードのみを差分と更新によって仮想 DOM の更新されたバージョンをチェックします。

46.用語を説明してくださいプロファイラー Reactで

Profiler は、アプリケーションのレンダリング回数と各コンポーネントのレンダリングにかかる時間を測定することで、アプリの最適化を支援する React ツールです。これは、開発者が最適化が必要なアプリケーションの部分を特定するのに役立ちます。

47.用語を説明してくださいコンテキスト Reactで

Context は、props を使用して各ネストレベルを介してデータを渡すことなく、多くのレベルで React コンポーネント間でデータを渡す方法です。テーマ情報やユーザーデータなど、定期的な更新を必要としない多くのコンポーネントと簡単にデータを共有する場合に最適です。その欠点は、コンポーネントの再利用が困難になる可能性があることです。

48.用語を説明してください取り付け Reactで

React でのマウントは、コンポーネントをノードとして DOM にアタッチするプロセスです。アンマウントはその逆です。

49.用語を説明してくださいレンダリング Reactで

レンダリングは、コンポーネントを描画するプロセスです。通常、コンポーネントの状態が変化し、React が UI を再描画する必要がある場合に発生します。レンダリング中にコンポーネントが再描画されると、その子コンポーネントも再描画されます。

50.用語を説明してくださいエラー境界 Reactで

エラー境界とは、子コンポーネントから JavaScript エラーをキャッチし、エラーをログに記録し、クラッシュしたノードの代わりにフォールバック UI を表示する React コンポーネントを指します。エラー境界は React 16 で導入されました。

まとめ

知っておくべき React インタビューの質問トップ 50 のこのリストの最後に達しました。

また、同じものはなく、面接はどの方向にも進む可能性があることに注意してください。