一般的な反応面接の質問の要約（中間フロントエンドに適しています）

https://segmentfault.com/a/1190000016885832?utm_source=tag-newest#item-11から

Reactでのキーの役割は何ですか？

キーは、リストのどの要素が変更、追加、または削除されたかを追跡するためにReactが使用する二次識別子です。

render（）{
   return （
     <ul> 
      { this .state.todoItems.map（（{item、key}）=> {
         return <li key = {key}> {item} </ li>
       }）}
     </ ul >
   ）
}

開発プロセスでは、要素のキーが兄弟要素間で一意であることを確認する必要があります。React Diffアルゴリズムでは、Reactは要素のキー値を使用して、要素が新しく作成されたのか移動されたのかを判断し、それによって不要な要素の再レンダリングを減らします。さらに、ReactはKey値を使用して要素とローカル状態の間の関連付けを決定する必要があるため、変換関数でのKeyの重要性を無視してはなりません。

setStateを呼び出した後に何が起こりましたか？

コードでsetState関数を呼び出した後、Reactは受信パラメーターオブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス（調整）をトリガーします。調整プロセスの後、Reactは新しい状態に従って比較的効率的な方法でReact要素ツリーを構築し、UIインターフェース全体の再レンダリングについて設定します。Reactが要素ツリーを取得した後、Reactは新しいツリーと古いツリーの違いを自動的に計算し、その違いに応じてインターフェースを最小化して再レンダリングします。差異計算アルゴリズムでは、Reactは変更された位置とその変更方法を比較的正確に把握できるため、すべてを再レンダリングするのではなく、オンデマンドで更新されます。

ライフサイクル機能に反応する

初期化フェーズ：
- getDefaultProps：インスタンスのデフォルトプロパティを取得します
- getInitialState：各インスタンスの初期化状態を取得します
- componentWillMount：コンポーネントがロードされ、ページにレンダリングされます
- render：コンポーネントはここで仮想DOMノードを生成します
- componentDidMount：コンポーネントが実際にマウントされた後
実行状態：
- componentWillReceiveProps：コンポーネントがプロパティを受信しようとするときに呼び出されます
- shouldComponentUpdate：コンポーネントが新しいプロパティまたは新しい状態を受け取ったとき（falseを返す可能性があります。データを受け取った後、コンポーネントは更新されず、レンダーコールが妨げられ、次の関数は続行されません）
- componentWillUpdate：コンポーネントが更新されようとしています。属性と状態は変更できません
- レンダリング：コンポーネントの再描画
- componentDidUpdate：コンポーネントが更新されました
破壊フェーズ：
- componentWillUnmount：コンポーネントが破棄されようとしています

ComponentUpdateがすべきこと（Reactパフォーマンス最適化のための定期的な関数はどれですか？）

shouldComponentUpdateこのメソッドは、domを再描画するためにrenderメソッドを呼び出す必要があるかどうかを決定するために使用されます。domの記述は非常にコストがかかるため、shouldComponentUpdateメソッドでより最適化されたdom diffアルゴリズムを記述できれば、パフォーマンスを大幅に向上させることができます。

参照反応パフォーマンス最適化-sf

仮想domがパフォーマンスを向上させる理由（必須）

仮想domは、jsと実際のdomの間にキャッシュを追加するのと同じです。domdiffアルゴリズムを使用して不要なdom操作を回避し、パフォーマンスを向上させます。

JavaScriptオブジェクト構造を使用してDOMツリーの構造を表現し、このツリーを使用して実際のDOMツリーを構築し、それをドキュメントに挿入して、状態が変化したときに新しいオブジェクトツリーを再構築します。次に、新しいツリーを古いツリーと比較し、2つのツリーの違いを記録し、2で記録した違いを手順1で作成した実際のDOMツリーに適用し、ビューを更新します。

リファレンス仮想DOMを理解するためにどのように？-Zhihu

反応差分の原則（多くの場合、テストされており、主要メーカーがテストする必要があります）

階層に従ってツリー構造を分解し、同じレベルの要素のみを比較します。
簡単に比較できるように、リスト構造の各セルに一意のキー属性を追加します。
Reactは同じクラスのコンポーネントにのみ一致します（ここでのクラスはコンポーネントの名前を指します）
マージ操作では、コンポーネントのsetStateメソッドが呼び出されると、Reactはそれをダーティとしてマークします。各イベントループの終わりに、Reactはダーティとマークされたすべてのコンポーネントの再描画をチェックします。
選択的なサブツリーのレンダリング。開発者はshouldComponentUpdateを書き換えて、diffのパフォーマンスを向上させることができます。

参照：Reactのdiffアルゴリズム

Reactでの参照の役割は何ですか？

Refは、DOM要素またはコンポーネントインスタンスへの安全なアクセスのためにReactによって提供されるハンドルです。要素にref属性を追加し、コールバック関数のDOMツリーで要素のハンドルを受け入れることができます。コールバック関数の最初のパラメーターとして返されます。

クラスCustomForm extends Component { 
  handleSubmit =（）=> { 
    console.log（ "Input Value："、this .input.value）
  } 
  render（）{ 
    return （
       <form onSubmit = { this .handleSubmit}> 
        < input 
          type = ' text ' 
          ref = {（input）=> this .input = input} /> 
        <button type =' submit '> Submit </ button> 
      </ form>     ）
  } 
}

上記のコードの入力フィールドにはref属性が含まれています。この属性で宣言されたコールバック関数は、入力に対応するDOM要素を受け取ります。他のクラス関数で使用するために、このポインターにバインドします。refはクラスコンポーネントに限定されないことにも言及する価値があります。機能コンポーネントはクロージャを使用して一時的に値を保存することもできます。

function CustomForm（{handleSubmit}）{ 
  inputElement 
  return （
     <form onSubmit = {（）=> handleSubmit（inputElement.value）}> 
      < input 
        type = 'text' 
        ref = {（input）=> inputElement = input} />を許可する/> 
      <button type = 'submit'>送信</ button> 
    </ form>   ）
}

次のようなTwitter要素を作成すると、関連するクラス定義はどのようになりますか？

<Twitter username = 'tylermcginnis33'> 
  {（user） => user === null 
    ？<ロード/> 
    ：<バッジ情報= {ユーザー} />} 
</ツイッター> 
'反応'からの輸入が反応、{コンポーネント、PropTypes} 
からの輸入fetchUser 'さえずり'
 // ユーザ名でfetchUserテイクが約束返す
// これをそのユーザー名のデータで解決されます。
クラスTwitter拡張コンポーネント{
   // これを終了 
}

レンダーコールバックパターンに慣れていない場合、このコードは少し奇妙に見えるかもしれません。このモードでは、コンポーネントは子コンポーネントとして関数を受け取り、レンダリング関数でprops.childrenを使用して呼び出します。

import React、{Component、PropTypes} from 'react' 
import fetchUser from 'twitter' 
class Twitter extends Component { 
  state = { 
    user：null 、
  } 
  static propTypes = { 
    username：PropTypes.string.isRequired、
  } 
  componentDidMount（）{ 
    fetchUser（this .props.username）
      .then（（user） => this .setState（{user}））
  } 
  render（）{ 
    return  this .props.children（this .state.user）
  } 
}

このモデルの利点は、親コンポーネントを子コンポーネントから切り離すことです。親コンポーネントは、Propsを経由せずに子コンポーネントの内部状態に直接アクセスできるため、親コンポーネントは、子コンポーネントによって表示されるUIインターフェイスをより簡単に制御できます。たとえば、プロダクトマネージャーから、最初に表示したバッジをプロファイルに置き換えるように求められた場合、コールバック関数を簡単に変更できます。

<Twitter username = 'tylermcginnis33'> 
  {（user） => user === null 
    ？<Loading /> 
    ：<Profile info = {user} />} 
</ Twitter>

プレゼンテーションコンポーネントとコンテナコンポーネントの違いを示す

プレゼンテーションコンポーネントは、コンポーネントの外観を考慮します。ディスプレイは、特にプロップを介してデータとコールバックを受け入れ、ほとんど独自の状態を持ちませんが、ディスプレイコンポーネントが独自の状態を持っている場合、通常はデータの状態ではなくUIの状態のみを考慮します。
コンテナコンポーネントは、コンポーネントがどのように機能するかをより重視しています。コンテナコンポーネントは、表示コンポーネントまたはその他のコンテナコンポーネントのデータと動作を提供し、Fluxアクションを呼び出して、表示コンポーネントへのコールバックとして提供します。コンテナーコンポーネントは、（他のコンポーネントの）データソースであるため、多くの場合ステートフルです。

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

クラスコンポーネントを使用すると、コンポーネント自体の状態やライフサイクルフックなどの追加機能を使用できるだけでなく、コンポーネントがストアに直接アクセスして状態を維持できるようになります。
コンポーネントが小道具を受け取り、コンポーネント自体をページにレンダリングする場合、コンポーネントは「ステートレスコンポーネント」であり、純粋な関数を使用してそのようなコンポーネントを作成できます。このようなコンポーネントは、ダムコンポーネントまたはディスプレイコンポーネントとも呼ばれます。

（コンポーネント）状態とプロパティ（プロパティ）の違いは何ですか

状態は、コンポーネントのマウント時に必要なデータのデフォルト値に使用されるデータ構造です。状態は時間とともに変化する可能性がありますが、ほとんどの場合、ユーザーイベントの動作の結果として変化します。
小道具（プロパティの略）は、コンポーネントの構成です。プロップは親コンポーネントから子コンポーネントに渡され、子コンポーネントに関する限り、プロップは不変です。コンポーネントは自身の小道具を変更することはできませんが、サブコンポーネントのプロップをまとめることはできます（統合管理）。小道具は単なるデータコールバック関数ではなく、小道具を介して渡すこともできます。

制御コンポーネントとは

HTMLでは、同様の <input>、 <textarea> 及び <select> のでフォーム要素は、自分の状態を維持し、更新へのユーザ入力に基づきます。ユーザーがフォームを送信すると、前述の要素の値がフォームと共に送信されます。ただし、Reactでは少し異なります。form要素を含むコンポーネントは、状態の入力値を追跡し、onChangeなどのコールバック関数が呼び出されるたびに、状態を更新してコンポーネントを再レンダリングします。このようにReactによって値が制御される入力フォーム要素。このような要素は「制御された要素」と呼ばれます。

高次コンポーネントとは何ですか？

高次コンポーネントは、コンポーネントをパラメーターとして取り、新しいコンポーネントを返す関数です。HOCを使用すると、コード、ロジック、およびブートストラップ抽象化を再利用できます。おそらく最も一般的なのはReduxの接続機能です。単純な共有ツールライブラリと単純な組み合わせに加えて、HOCの最善の方法は、Reactコンポーネント間で動作を共有することです。同じことを行うために別の場所に多くのコードを記述している場合は、コードをリファクタリング可能なHOCにリファクタリングすることを検討してください。

setStateに渡されるパラメーターがオブジェクトではなくコールバックであることが推奨される理由

this.propsおよびthis.stateの更新は非同期である可能性があるため、それらの値に依存して次の状態を計算することはできません。

これをコンストラクタでバインドする以外に、他に方法はありますか？

プロパティ初期化子を使用してコールバックを適切にバインドでき、create-react-appもデフォルトでサポートされています。コールバックで矢印関数を使用できますが、問題は、コンポーネントがレンダリングされるたびに新しいコールバックが作成されることです。

（コンストラクターで）super（props）を呼び出す目的は何ですか

super（）が呼び出される前にサブクラスがこれを使用することはできません。ES2015では、サブクラスはコンストラクターでsuper（）を呼び出す必要があります。プロップをsuper（）に渡す理由は、コンストラクターでthis.propsに（サブクラスで）アクセスしやすくするためです。

ReactコンポーネントがAjaxリクエストを開始する場所

Reactコンポーネントでは、ネットワーク要求はcomponentDidMountで開始する必要があります。このメソッドは、コンポーネントが最初に "マウント"（DOMに追加）されたときに実行され、コンポーネントのライフサイクル中に1回だけ実行されます。さらに重要なのは、コンポーネントがマウントされる前にAjaxリクエストが完了したことを保証できないことです。そうであれば、マウントされていないコンポーネントでsetStateを呼び出そうとしますが、機能しません。componentDidMountでネットワークリクエストを開始すると、更新可能なコンポーネントがあることが保証されます。

Reactでのイベントの処理方法を説明してください。

ブラウザー間の互換性の問題に対処するために、ReactのイベントハンドラーはSyntheticEventのインスタンスを渡します。これは、Reactのブラウザーネイティブイベントのクロスブラウザーラッパーです。

これらのSyntheticEventsは、すべてのブラウザーで互換性があることを除いて、慣れているネイティブイベントと同じインターフェイスを持っています。興味深いことに、Reactは実際には子ノード自体にイベントをアタッチしません。Reactは単一のイベントリスナーを使用して、トップレベルのすべてのイベントをリッスンします。これはパフォーマンスに優れています。これは、DOMの更新時にReactがイベントリスナーの追跡について心配する必要がないことも意味します。

createElementとcloneElementの違いは何ですか？

React.createElement（）：JSX構文はReact.createElement（）を使用してReact要素を構築します。3つのパラメーターを受け入れます。最初のパラメーターはラベル名にすることができます。div、span、Reactコンポーネントなど。2番目のパラメーターは、着信属性です。3番目以降のパラメーターは、すべてコンポーネントのサブコンポーネントです。

React.createElement（
    type、
    [props]、
    [... children] 
）

React.cloneElement（）はReact.createElement（）に似ていますが、最初に渡すパラメーターがReact要素であり、タグ名やコンポーネントではない点が異なります。新しく追加された属性は元の属性にマージされ、返された新しい要素に渡され、子要素のトロフィーが置き換えられます。

React.cloneElement（
  element、
  [props]、
  [... children] 
）

Reactでコンポーネントを構築するには3つの方法があります

React.createClass（）、ES6クラス、およびステートレス関数。

React Component Division Business Component Technology Component？

コンポーネントは通常、その責任に応じてUIコンポーネントとコンテナコンポーネントに分けられます。
UIコンポーネントはUIの表示を担当し、コンテナーコンポーネントはデータとロジックの管理を担当します。
2つは、React-Reduxが提供するConnectメソッドによって接続されます。

フラックス思考の簡単な説明

Fluxの最大の特徴は、データの「一方向のフロー」です。

ビューへのユーザーアクセス
問題のユーザーアクションの表示
ディスパッチャーはアクションを受け取り、それに応じて更新するようストアに要求します
ストアが更新された後、「変更」イベントが発行されます
Viewが「change」イベントを受け取ると、ページを更新します

Reactプロジェクトで使用されている足場（この質問は未解決のトピックです）

creat-react-appヨーマン等

還元を理解していますか？

Reduxは、主にコンポーネント間の状態共有の問題を解決するアプリケーションデータフローフレームワークです。原則は集中管理です。アクション、ストア、レデューサーの3つの主要な方法があり、ワークフローは、アクションと受信ストアを受け取るためにストアのディスパッチを呼び出すワークフローです。、Reduceは状態操作を実行し、ビューはストアによって提供されるgetStateを介して最新のデータを取得します。fluxはデータ操作にも使用されます。4つのコンポーネントアクション、ディスパッチ、ビュー、ストアがあり、ワークフローはビューがアクションを送信し、ディスパッチャーが受信することですアクション、ストアにデータを更新させます。更新が完了すると、ストアは変更を発行し、ビューは変更を受け入れてビューを更新します。ReduxはFluxによく似ています。主な違いは、Fluxにはアプリケーションの状態を変更できる複数のストアがあることです。Fluxでは、ディスパッチャーを使用して登録済みのコールバックイベントにデータを渡しますが、reduxでは、更新可能な状態のストアを1つだけ定義できます。ReduxはストアとDispatcherを組み合わせたものです。構造はよりシンプルで明確です
新しい状態が追加され、状態の管理がより明確になり、やり直しにより、プロセスがより標準化され、手動コーディングの量が削減され、コーディング効率が向上します。同時に、データが更新されると、コンポーネントが不要になることもありますが、それらも再描画する必要があります効率。一般的に、複数の相互作用と複数のデータストリームを使用して複雑なプロジェクトを構築する場合にのみ使用します。

reduxの欠点は何ですか

コンポーネントが必要とするデータは、フラックスのようにストアから直接ではなく、親コンポーネントによって渡される必要があります。
コンポーネントに関連するデータが更新されると、親コンポーネントがコンポーネントを使用する必要がない場合でも、親コンポーネントは再レンダリングされ、効率に影響する可能性があります。または、判断のために複雑なshouldComponentUpdateを記述する必要があります。