15ソリューションでインタビューの質問を反応します

Reactの人気は、開発者の需要が世界中の多くの都市でまだ供給を上回っていることを示しています。経験の少ない開発者（またはしばらくの間雇用市場から外れてきた人）にとって、インタビュー段階であなたの知識を示すことは気が遠くなる可能性があります。 この記事では、Reactを理解し、効果的に作業することの中心となるさまざまな知識をカバーする15の質問を調べます。質問ごとに、答えを要約し、追加のリソースへのリンクを提供します。

キーテイクアウト

この記事は、ソリューションとの15の一般的な反応インタビューの質問の包括的なリストを提供し、仮想DOM、JSX、クラス、機能コンポーネント、状態および小道具など、Reactの理解と作業の中心的な知識をカバーしています。フックなど

この記事は、クラスと機能のコンポーネントの違いを理解することの重要性、コレクションのレンダリングにおけるキーの役割、および状態と小道具の区別を強調しています。

この記事では、プロップ掘削、Reactコンテキスト、Redux、Reactアプリケーションのスタイリングのためのさまざまなアプローチ、制御されていないコンポーネントと制御されていないコンポーネントの概念など、より高度なトピックについても説明しています。
• この記事は、Reactフックの利点を強調し、クラスベースのコンポーネントの必要性を削除し、ロジックの再利用を容易にし、読みやすくテスト可能なコードにつながることで締めくくります。
• 1。仮想domは何ですか？
• 回答
• 仮想DOMは、アプリケーションのUIを構成する実際のHTML要素のメモリ内表現です。コンポーネントが再レンダリングされると、仮想DOMは、適用される更新のリストを作成するために、DOMのモデルの変更を比較します。主な利点は、大きなチャンクを再レンダリングする必要があるのではなく、非常に効率的で、実際のDOMに必要な最小の変更のみを行うことです。
さらに読み取り

仮想dom

を理解します

仮想dom説明

2。 jsxとは？

回答
JSXは、HTMLのように見えるコードを作成できるJavaScript Syntaxの拡張機能です。定期的なJavaScript関数呼び出しまでコンパイルし、コンポーネントのマークアップを作成するためのより良い方法を提供します。
• このJSX：
を取ります

次のJavaScriptに翻訳します：

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

さらに読み取り

• jsx
の紹介
• jsx in Depth

3。クラスコンポーネントと機能的なコンポーネントの違いは何ですか？

回答

React 16.8（フックの導入）の前に、クラスベースのコンポーネントを使用して、内部状態を維持したり、ライフサイクルメソッドを使用したりするために必要なコンポーネント（つまり、ComponentDidMountおよびSefsComponentUpDate）を作成しました。クラスベースのコンポーネントは、Reactのコンポーネントクラスを拡張するES6クラスであり、少なくともrender（）メソッドを実装します。

クラスコンポーネント：

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

関数コンポーネントはステートレス（再び、関数成分：

<span>class Welcome extends React<span>.Component</span> {
</span>  <span>render() {
</span>    <span>return <h1>Hello, {this.props.name}</h1>;
</span>  <span>}
</span><span>}
</span>

注：反応16.8でのフックの導入は、これらの区別がもはや適用されないことを意味します（質問14と15を参照）。

さらに読み取り

functionalコンポーネント対react

のクラスコンポーネント

functional vs class-components in react

4。キーは何に使用されていますか？
回答

Reactでコレクションをレンダリングする場合、反応する各要素にキーを追加することが重要であり、要素とデータの間の関連性を追跡するのに役立ちます。キーは一意のIDである必要があります。理想的には、コレクションアイテムのUUIDまたはその他のユニークな文字列です。

キーを使用していない、またはキーとしてインデックスを使用しないと、コレクションからアイテムを追加して削除するときに奇妙な動作につながる可能性があります。

さらに読み取り

リストとキー

<span>function <span>Welcome</span>(props) {
</span>  <span>return <h1>Hello, {props.name}</h1>;
</span><span>}
</span>

Reactの重要な小道具を理解しています

5。状態と小道具の違いは何ですか？

• 回答
• 小道具は、親からコンポーネントに渡されるデータです。それらは変異するのではなく、他の値の計算にのみ表示または使用されます。状態は、コンポーネントの寿命の間に変更できるコンポーネントの内部データであり、再レンダー間で維持されます。
さらに読み取り

props vs state

6。状態を直接変異させる代わりにsetStateを呼び出すのはなぜですか？

回答

コンポーネントの状態を直接変異させようとする場合、Reactはコンポーネントを再レンダリングする必要があることを知る方法がありません。 setState（）メソッドを使用することにより、ReactはコンポーネントのUIを更新できます。
• ボーナス

ボーナスとして、状態の更新が同期することが保証されていないことについても話すことができます。別の状態（または小道具）に基づいてコンポーネントの状態を更新する必要がある場合は、状態と小道具を2つの引数として取得するsetState（）に関数を渡します。

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

さらに読み取り

状態を正しく使用して

7。プロップとして渡された値のタイプをどのように制限しますか、それとも必要にしますか？

回答

コンポーネントの小道具をチェックするには、プロップタイプパッケージ（以前はReactの一部として15.5以前に含まれていた）を使用して、予想される値の種類と小道具が必要かどうかを宣言できます。

さらに読み取り

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

proptypesを使用したタイプチェック

8。プロップ掘削とは何ですか？それを避けることができますか？

回答

プロップ掘削は、親コンポーネントから階層の低いコンポーネントにデータを渡す必要があるときに起こることです。 >

コンポーネントをリファクタリングしたり、コンポーネントを早期に分割したりすることを避け、最も近い親のコンポーネントにコンポーネントを分解しないようにすることで、プロップ掘削を回避することがあります。コンポーネントツリーに深い/遠く離れたコンポーネント間で状態を共有する必要がある場合、ReactのコンテキストAPI、またはReduxのような専用の状態管理ライブラリを使用できます。

さらに読み取り

小道具掘削

9。反応のコンテキストとは？
回答

コンテキストAPIは、アプリ内の複数のコンポーネント間で状態を共有する問題を解決するためにReactによって提供されます。コンテキストが導入される前に、唯一のオプションは、Reduxなどの別の州管理ライブラリを持ち込むことでした。しかし、多くの開発者は、特に小規模なアプリケーションのために、Reduxが多くの不必要な複雑さを導入すると感じています。

さらに読み取り

コンテキスト（race docs）

ReduxをReactフックとコンテキストAPIに置き換える方法

10。 reduxとは？
回答
Reduxは、コンテキストAPIが存在する前に作成されたReactのサードパーティ州管理ライブラリです。コンポーネントが小道具からデータを受信できるというストアと呼ばれる状態容器の概念に基づいています。ストアを更新する唯一の方法は、還元剤に渡される店にアクションを派遣することです。還元剤はアクションと現在の状態を受け取り、新しい状態を返し、サブスクライブコンポーネントを再レンダリングして再レンダリングします。

さらに読み取り

redux

を始めましょう reduxに深く潜ります

11。 Reactアプリケーションをスタイリングするための最も一般的なアプローチは何ですか？

回答
スタイリング反応コンポーネントにはさまざまなアプローチがあり、それぞれに長所と短所があります。言及すべき主なものは次のとおりです
• インラインスタイリング：プロトタイプに最適ですが、制限があります（例：擬似クラスのスタイリングはありません）
>
• クラスベースのCSSスタイル：インラインスタイリングよりもパフォーマンスが高く、反応に慣れた開発者に馴染みのある
• CSS-in-JSスタイリング：コンポーネント内でJavaScriptとしてスタイルを宣言し、コードのように扱うさまざまなライブラリがあります。
さらに読み取り
反応コンポーネントをスタイリングする方法
12。制御されたコンポーネントと制御されていないコンポーネントの違いは何ですか？
回答
HTMLドキュメントでは、多くのフォーム要素（例：、、<inupt>）が独自の状態を維持します。制御されていないコンポーネントは、DOMをこれらの入力の状​​態の真実の源として扱います。制御されたコンポーネントでは、内部状態を使用して要素値を追跡します。入力の値が変更されたら、React React redents of input。<p> </p>非反応コードと統合する場合（たとえば、何らかのjQueryフォームプラグインをサポートする必要がある場合）。 <p>さらに読み取り</p> <h3> </h3>制御対制御されていない入力<ul> <li>制御されたコンポーネント（React docs）</li> <li>制御されていないコンポーネント（React docs）</li> <li> </li> 13。ライフサイクルの方法は何ですか？</ul> <h2>回答</h2> <h3>クラスベースのコンポーネントは、ライフサイクルの特定のポイントで呼び出される特別な方法を宣言できます。これらは、コンポーネントが必要とする可能性のあるものをセットアップして引き裂くのに役立ちます。たとえば、タイマーのセットアップ、ブラウザイベントへの拘束力。 </h3>次のライフサイクル方法は、コンポーネントに実装できます。 <p> </p>componentWillMount：コンポーネントが作成された後に呼び出されますが、domにレンダリングされる前に<p> </p>componentDidMount：最初のレンダリングの後に呼び出されます。コンポーネントのDOM要素が利用可能になりました<ul> <li>componentwillreceiveProps：プロップが更新されたときに呼び出されます</li> <li>shouldcomponentUpdate：新しい小道具を受け取った場合、この方法は再レンダーを防ぐためにパフォーマンスを最適化することができます</li> <li>componentwillupdate：新しい小道具が受信されたときに呼び出されます</li>および<li> suffcomponentUpdateがtrue </li> <li> <em>componentDidupdate：コンポーネントが更新された後に呼び出されます</em> </li>ComponentWillunMount：コンポーネントがDOMから削除される前に呼び出され、イベントリスナーのようなものをクリーンアップできるようにします。 <li> </li>機能的なコンポーネントを扱う場合、使用効果フックを使用してライフサイクルの動作を再現できます。 <li>さらに読み取り</li> </ul> <p>ライフサイクル方法図</p>を反応します <h3>コンポーネントライフサイクルAPI</h3> <ul> <li> 14。 React Hooksとは？</li> <li>回答</li> </ul>フックは、クラスベースのコンポーネント（つまり、内部状態およびライフサイクル方法）の利点を機能的なコンポーネントにもたらすReactの試みです。<h3>さらに読み取り</h3> <ul> <li> 5分でReactフックを学習します</li> <li>React Hooks：あなた自身の開始と構築する方法 </li> </ul> 15。 React Hooksの利点は何ですか？<h2> </h2>回答<h3> </h3>フックを導入するための導入の利点がいくつかあります：<p> </p> <ul>クラスベースのコンポーネント、ライフサイクルフック、およびこのキーワードシェナニガンの必要性を削除する<li> カスタムフックに共通の機能を抽象化することにより、ロジックを再利用しやすくする</li> <li>コンポーネント自体からロジックを分離できることにより、より読みやすく、テスト可能なコード</li> <li> </li>さらに読み取り</ul> <h3> Reactフックの利点</h3> <ul> <li>React Hooks - 短期間での古い再利用可能なロジックアプローチとの利点と比較</li> <li> </li>ラッピング</ul> <h2>決して包括的なリスト（Reactは絶えず進化している）ですが、これらの質問は多くの根拠をカバーしています。これらのトピックを理解することで、最新の変更のいくつかとともに、ライブラリの実用的な知識が得られます。提案されたさらなる読書をフォローアップすると、理解を固めるのに役立つので、詳細な知識を示すことができます。 </h2>インタビューコードのエクササイズのガイドをフォローアップするので、近い将来に注意してください。 <p>幸運！</p> <p> React Interviewの準備に関するFAQ</p> <p></p>React Developerの就職面接にどのように準備する必要がありますか？ <h2> React開発者の就職面接、研究のコアコンセプトの研究、Reactに関連する練習コーディング演習、Reactプロジェクトポートフォリオのレビュー、および国家管理、コンポーネントライフサイクル、Reduxや関連する関連技術についての経験について説明する準備ができています。 React Router。</h2> <h3></h3>インタビューの前に会社とその開発のニーズを調査するための最良の方法は何ですか？ <p> Webサイトにアクセスし、Webアプリケーションやプロジェクトを調べ、Tech StackでReactがどのように使用されるかを理解することにより、会社を調査します。彼らの特定のニーズに合わせてあなたの知識を調整し、彼らの反応に基づいたプロジェクトに貢献することへの熱意を示してください。 </p>特定のプロジェクト、テクノロジー、React開発に関連する成果など、Reactの経験を強調することにより、履歴書を調整します。反応コンポーネント、国家管理、および関連するライブラリに関する知識を強調してください。 <h3>一般的な反応インタビューの質問には、「Reactコンポーネントのライフサイクルを説明する」、「Reactで状態をどのように管理しますか？」、「Reactフックを使用することの利点は何ですか？」<h3></h3>反応開発に関連する技術的な質問に効果的に準備するにはどうすればよいですか？ </h3> <p>コンポーネントの構築、状態の管理、小道具とコンテキストの操作など、反応に関連する練習コーディング演習。仮想DOMやコンポーネントの再利用性などのReact Conceptsに精通してください。 </p>実際のプロジェクトでの経験について話し合い、パフォーマンスを最適化した方法を説明し、構築した複雑なコンポーネントの例を共有することにより、Reactスキルを実証します。州の管理とコンポーネントアーキテクチャへのアプローチを説明する準備ができています。<h3> </h3> <p>インタビュー中のReactのコンポーネントライフサイクルを理解することの重要性は何ですか？ </p>反応成分ライフサイクルを理解することは、コンポーネントの動作と状態を効率的に管理するために不可欠です。ライフサイクルの方法を説明し、いつ実際のシナリオでそれらを使用するかを説明する準備ができています。 <h3>一般的な間違いには、プロジェクトを適切に説明できないこと、会社や役割について質問するのではなく、Reactの基本に関する知識の欠如を示すことが含まれます。徹底的な準備と思慮深いコミュニケーションによってこれらの落とし穴を避けてください</h3></inupt>

以上が15ソリューションでインタビューの質問を反応しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。