概要
https://github.com/sudheerj/reactjs-interview-questions#core-react
こちらの記事の日本語訳となります。
Answerを１行にまとめて見やすくしました！
100個書くまで更新し続けます！
Q1. Reactってなに？
A. Reactは、シングルページアプリケーションのユーザーインターフェイスの構築に使用されるオープンソースのフロントエンド JavaScriptライブラリです。
Web およびモバイル アプリのビュー レイヤーを処理するために使用されます。Reactは、Facebookで働くソフトウェアエンジニアのジョーダン・ウォーク氏によって作成されました。React は、2011 年に Facebook のニュース フィードに、2012 年に Instagram に初めて展開されました。
Q2. Reactの主な機能は何ですか?
A. JSX記法・仮想DOM・SSR・コンポーネント
- 開発者が JS コードに HTML を記述できるようにする JS の構文拡張であるJSX構文を使用します。
- RealDOM の操作はコストがかかることを考慮して、RealDOM の代わりにVirtualDOMを使用します。
- サーバー側のレンダリングをサポートします。
- 単方向データ フローまたはデータ バインディングに従います。
- 再利用可能/構成可能なUI コンポーネントを使用してビューを開発します。
Q3. JSXって何ですか？
A. JavaScriptの中にHTMLを書ける拡張構文
JSXは、ECMAScript に対する XML に似た構文拡張です (頭字語はJavaScript XMLを表します)。基本的には、React.createElement()関数に構文糖衣を提供するだけで、JavaScript の表現力と HTML のようなテンプレート構文を提供します。
Q4. 要素とコンポーネントの違いは何ですか?
A. 要素は変更できないが、コンポーネントは変更できる
Elementは、DOM ノードまたはその他のコンポーネントに関して、画面に表示したいものを記述する単純なオブジェクトです。要素には、propsに他の要素を含めることができます。React 要素の作成は簡単です。要素が作成されると、変更されることはありません。
一方、コンポーネントはいくつかの異なる方法で宣言できます。メソッドを持つクラスにするrender()ことも、関数として定義することもできます。いずれの場合も、props を入力として受け取り、JSX ツリーを出力として返します。
Q5. Reactでコンポーネントを作成するには?
A. 関数componentとして宣言する
関数componentは props オブジェクトを最初のパラメーターとして受け取り、React 要素を返す純粋な JavaScript 関数です。
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>;
}
Q6. Reactの状態とは?
A. コンポーネントの中で保持される情報のこと
コンポーネントの状態は、コンポーネントの存続期間中に変化する可能性のある情報を保持するオブジェクトです。ステートをできる限りシンプルにし、ステートフル コンポーネントの数を最小限に抑えるように常に努める必要があります。
State は props に似ていますが、非公開であり、コンポーネントによって完全に制御されます。つまり、所有者コンポーネントが渡すことを決定するまで、他のコンポーネントからアクセスすることはできません。
Q7. Reactのpropsとは何ですか?
A. 親コンポーネントから子コンポーネントに渡されるデータのこと
propsはコンポーネントへの入力です。これらは、HTML タグ属性と同様の命名規則を使用して、作成時にコンポーネントに渡される単一の値または一連の値を含むオブジェクトです。これらは、親コンポーネントから子コンポーネントに渡されるデータです。
Q8. state と props はどう違いますか？
A. コンポーネント内で管理されるのが、state。コンポーネント間で受け渡しされるのが、Props。
propsとstateはどちらもプレーンな JavaScript オブジェクトです。どちらも render の出力に影響する情報を保持していますが、コンポーネントに関しては機能が異なります。Props は関数パラメーターと同様にコンポーネントに渡されますが、状態は関数内で宣言された変数と同様にコンポーネント内で管理されます。
Q9. stateを直接更新してはいけないのはなぜですか?
A. コンポーネントは再レンダリングされないから
stateを直接更新しようとすると、コンポーネントは再レンダリングされません。
代わりにsetState()メソッドを使用してください。コンポーネントのstateオブジェクトの更新をスケジュールします。stateが変化すると、コンポーネントは再レンダリングによって応答します。
Q10. setState()の引数としてのコールバック関数の目的は何ですか?
A. コンポーネントがレンダリングされた後に続く処理の記述ため
setState が終了し、コンポーネントがレンダリングされると、コールバック関数が呼び出されます。setState()は非同期であるため、ポスト アクションにはコールバック関数が使用されます。
Q11. HTML と React のイベント処理の違いは何ですか?
A. HTMLは小文字、ReactはcamelCase
HTML では、イベント名は通常、慣習として小文字で表されます。
<button onclick="activateLasers()"></button>
React ではcamelCase規則に従います。
<button onClick={activateLasers}>
Q12. インライン条件式とは
A. 条件式 ?? trueの場合 : falseの場合
JS から利用できる if ステートメントまたは三項式を使用して、条件付きで式をレンダリングできます。これらのアプローチとは別に、式を中括弧で囲み、その後に JS 論理演算子&& を続けることで、任意の式を JSX に埋め込むこともできます。
<h1>Hello!</h1>;
{
messages.length > 0 && !isLogin ? (
<h2>You have {messages.length} unread messages.</h2>
) : (
<h2>You don't have unread messages.</h2>
);
}
Q13. key属性とは何ですか?要素の配列でそれを使用する利点は何ですか?
A. 配列を作成するときに必要な識別ID
Aは、要素の配列を作成するときに含める必要keyがある特別な文字列属性です。Key prop は、React がどの項目が変更、追加、または削除されたかを識別するのに役立ちます。
キーは、兄弟間で一意である必要があります。ほとんどの場合、データの ID をキーとして使用します。
Q14. 仮想DOMとは？
A.
仮想 DOM (VDOM) は、リアル DOMのメモリ内表現です。UI の表現はメモリに保持され、「実際の」DOM と同期されます。これは、render 関数が呼び出されてから画面に要素が表示されるまでの間に発生するステップです。このプロセス全体を調整と呼びます。
Q15. 仮想 DOM のしくみ
A.
- 基礎となるデータが変更されるたびに、UI 全体が仮想 DOM 表現で再レンダリングされます。
- 次に、以前の DOM 表現と新しい表現の違いが計算されます。
- 計算が完了すると、実際の DOM は実際に変更されたものだけで更新されます。
Q16. コンポーネントのライフサイクルにはどのようなフェーズがありますか?
A.
コンポーネントのライフサイクルには、次の 3 つの異なるライフサイクル フェーズがあります。
-
Mounting:コンポーネントはブラウザー DOM にマウントする準備ができています。
-
Updating:このフェーズでは、コンポーネントは 2 つの方法で更新されます。新しいprops を送信、またはsetState()から状態を更新します。
-
Unmounting:この最後の段階では、コンポーネントは不要であり、ブラウザー DOM からアンマウントされます。このフェーズには、componentWillUnmount()ライフサイクル メソッドが含まれます。
DOM に変更を適用するとき、React は内部的にフェーズの概念を持っていることに言及する価値があります。それらは次のように分けられます。
-
Render : 副作用なく、コンポーネントがレンダリングされます。これはPureコンポーネントに適用され、このフェーズでReactはレンダリングを一時停止、中止、または再開することができます。
-
Pre-commit : コンポーネントが実際にDOMに変更を適用する前に、ReactがgetSnapshotBeforeUpdate()を通してDOMから読み取ることができる瞬間があります。
-
Commit : ReactはDOMと連携し、マウントのためのcomponentDidMount()、アップデートのためのcomponentDidUpdate()、アンマウントのためのcomponentWillUnmount()をそれぞれ最終ライフサイクルを実行する。