Reactインタビューの質問の要約

Reactインタビューの質問の要約には、主に基本的な知識、Reactコンポーネント、React Redux、およびReactルーティングが含まれています

基本知識

1.実際のDOMと仮想DOMを区別する

実際のDOM 仮想DOM
更新が遅い。 より速く更新します。
HTMLを直接更新できます。 HTMLを直接更新することはできません。
要素が更新されると、新しいDOMが作成されます。 要素が更新された場合は、JSXを更新します。
DOM操作はコストがかかります。 DOMの操作は非常に簡単です。
より多くのメモリを消費します。 メモリ消費はほとんどありません。

2. Reactとは何ですか?

  • Reactは、2011年にFacebookによって開発されたフロントエンドJavaScriptライブラリです。
  • コンポーネントベースのアプローチに従い、再利用可能なUIコンポーネントの構築に役立ちます。
  • 複雑でインタラクティブなWebおよびモバイルUIを開発するために使用されます。
  • 2015年にオープンソース化されただけですが、大規模なサポートコミュニティがあります。

3. Reactの特徴は何ですか?

Reactの主な機能は次のとおりです。

1)実際のDOMの代わりに仮想DOM使用します。
2)サーバー側でレンダリングできます
3)一方向のデータフローまたはデータバインディングに従います

4.Reactの主な利点をいくつか挙げてください。

Reactの主な利点のいくつかは次のとおりです。

1)アプリケーションのパフォーマンスを向上させます
2)クライアント側とサーバー側で簡単に使用できます
3)JSXによりコードが非常に読みやすくなります
4)ReactはMeteor、Angularなどの他のフレームワークと簡単に統合できます
5)使用React、UIテストケースを書くのはとても簡単です

5. Reactの制限は何ですか?

Reactの制限は次のとおりです。

1)Reactは単なるライブラリであり、完全なフレームワークではありません
2)ライブラリは非常に大きく、理解に時間がかかります
3)初心者プログラマーには理解しにくいかもしれません
4)インラインテンプレートとJSXを使用するため、コーディングが複雑になります

6. JSXとは何ですか?

JSXはJavaScriptXMLの略です。これは、JavaScriptの表現力とHTMLのようなテンプレート構文を使用するReactで使用されるファイルです。これにより、HTMLファイルが非常に理解しやすくなります。このファイルは、アプリケーションの信頼性を高め、パフォーマンスを向上させることができます。JSXの例を次に示します。

render(){
 return(
 <div>
 <h1> Hello World from Edureka!!</h1>
 </div>
 );
}

7.仮想DOMを知っていますか?それがどのように機能するかを説明します。

仮想DOMは、元々実際のDOMのコピーであった軽量のJavaScriptオブジェクトです。これはノードツリーであり、要素、それらの属性、およびコンテンツをオブジェクトおよびそれらの属性として扱います。Reactのレンダリング機能は、Reactコンポーネントからノードツリーを作成します。次に、ユーザーまたはシステムによって実行されたさまざまなアクションによって引き起こされたデータモデルの変更に応じて、ツリーを更新します。

仮想DOMの作業プロセスには3つの簡単なステップがあります。

1)基になるデータが変更されるたびに、UI全体が仮想DOMの説明で再レンダリングされます。
2)次に、以前のDOM表現と新しい表現の差を計算します。
3)計算が完了すると、実際のDOMは実際に変更されたコンテンツでのみ更新されます。

8.ブラウザがJSXを読み取れないのはなぜですか?

ブラウザはJavaScriptオブジェクトのみを処理できますが、通常のJavaScriptオブジェクトでJSXを読み取ることはできません。したがって、ブラウザでJSXを読み取れるようにするには、まず、BabelなどのJSXコンバータを使用してJSXファイルをJavaScriptオブジェクトに変換してから、ブラウザに渡す必要があります。

9. ES5と比較して、ReactのES6構文はどのように異なりますか?

次の構文は、ES5とES6の違いです。

1)与輸入が必要

// ES5
var React = require('react');

// ES6
import React from 'react';

2)輸出および輸出

// ES5
module.exports = Component;

// ES6
export default Component;

3)コンポーネント和機能

// ES5
var MyComponent = React.createClass({
 render: function() {
 return
 <h3>Hello Edureka!</h3>;
 }
});

// ES6
class MyComponent extends React.Component {
 render() {
 return
 <h3>Hello Edureka!</h3>;
 }
}

4)小道具

// ES5
var App = React.createClass({
 propTypes: { name: React.PropTypes.string },
 render: function() {
 return
 <h3>Hello, {this.props.name}!</h3>;
 }
});
​
// ES6
class App extends React.Component {
 render() {
 return
 <h3>Hello, {this.props.name}!</h3>;
 }
}

5)状態

// ES5
var App = React.createClass({
 getInitialState: function() {
 return { name: 'world' };
 },
 render: function() {
 return
 <h3>Hello, {this.state.name}!</h3>;
 }
});
​
// ES6
class App extends React.Component {
 constructor() {
 super();
 this.state = { name: 'world' };
 }
 render() {
 return
 <h3>Hello, {this.state.name}!</h3>;
 }
}

10. ReactはAngularとどう違うのですか?

テーマ React Angular
建築 MVCでのみ表示 完全なMVC
レンダリング サーバー側でレンダリングできます クライアントレンダリング
判定 仮想DOMを使用する 実際のDOMを使用する
データバインディング 一方向のデータバインディング 双方向のデータバインディング
デバッグ コンパイル時にデバッグする ランタイムデバッグ
著者 フェイスブック グーグル

Reactインタビューの質問の概要のすべてのコンテンツはPDFドキュメントにまとめられています。必要な場合は、ここをクリックして無料で入手できますフロントエンドのCSSインタビューの質問ドキュメント、JavaScriptのインタビューの質問ドキュメント、Vueも含まれています。面接質問書、大昌面接質問書、すべて無料でご利用いただけます!

コンポーネントを反応させる

1.「Reactではすべてがコンポーネントである」というフレーズを理解します。
2. Reactでのrender()の目的を説明します。
3. 2つ以上のコンポーネントを1つのコンポーネントに埋め込む方法は?
4.小道具とは何
ですか?5。Reactの状態はですか?どのように使用されますか?
6.状態と小道具を区別します
。7。コンポーネントの状態を更新する方法は?
8. Reactの矢印関数とは何ですか?使い方?
9.ステートフルコンポーネントとステートレスコンポーネントを区別します。
10. Reactコンポーネントのライフサイクルの段階は何ですか?
11.Reactコンポーネントのライフサイクルメソッドを詳細に説明します。
12. Reactのイベントとは何ですか?
13. Reactでイベントを作成するにはどうすればよいですか?
14. Reactの合成イベントとは何ですか?
15. Reactの参照について何を知っていますか?
16.Refを使用する必要がある状況をいくつか挙げてください。
17. Reactでコードをモジュール化するにはどうすればよいですか?
18. React
19でフォームを作成する方法。制御されたコンポーネントと制御されていないコンポーネントについてどのくらい知っていますか?
20.高次コンポーネント(HOC)とは何ですか?
21. HOCで何ができますか?
22.純粋コンポーネントとは何ですか?
23. Reactでのキーの重要性は何ですか?

React Redux

1. MVCフレームワークの主な問題は何ですか?
2.フラックスについて説明し
ます。3。Reduxとは何ですか?
4. Reduxが従う3つの原則は何ですか?
5.「信頼できる唯一の情報源」についてどのように理解していますか。
6.Reduxのコンポーネントを一覧表示します。
7.データはReduxをどのように流れますか?
8. Reduxでアクションを定義する方法は?
9.レデューサーの役割を説明します。
10. Reduxでのストアの意味は何ですか?
11. ReduxとFluxの違いは何ですか?
12. Reduxの利点は何ですか?

Reactルーティング

1. Reactルーティングとは何ですか?
2. React Router v4でswitchキーワードが使用されているのはなぜですか?
3. Reactでルーティングが必要なのはなぜですか?
4.Reactルーターの利点を挙げてください。
5. Reactルーターは通常のルーティングとどう違うのですか?

あなたがそれを必要とする場合は、あなたがすることができますここをクリックし得るためにそれを自由に含めて、フロントエンドのCSSの面接の質問の文書、JavaScriptの面接の質問の文書、Vueの面接の質問の文書、および大昌面接の質問の文書、無料で利用できるすべて!

おすすめ

転載: blog.csdn.net/QIANDXX/article/details/112773351