最も完全なReactインタビューの質問.

1. 仮想 DOM とは?

仮想 DOM は、メモリ内の実際の DOM の表現です. ul の表現はメモリに格納され、実際の DOM と同期されます. これは、レンダリング関数が呼び出され、要素が画面に表示されるときに発生するステップです.全体のプロセスは調整と呼ばれます

2. クラスコンポーネントと関数コンポーネントの違いは何ですか?

クラスコンポーネントは、状態やライフサイクルフックなどの他の機能を使用でき、彼はこれを持っています

関数コンポーネントは、ページにレンダリングするための小道具のみを受け取ることができます。ステートレスコンポーネントは、これなしではライフサイクルフックを使用できません。

クラスコンポーネントはインスタンス化する必要があるため、関数コンポーネントのパフォーマンスはクラスコンポーネントのパフォーマンスよりも高くなりますが、関数コンポーネントは返された結果を取得するために直接実行できます。パフォーマンスを向上させるには、関数コンポーネントを使用してみてください。

3. React の refs とは何ですか?

Refs provide a way to access DOM nodes or React elements created in the render method. 典型的なデータフローでは、プロパティは親子コンポーネントが相互作用する唯一の方法です. 子コンポーネントを変更したい場合は、 render it with new props. 場合によっては、典型的なデータフローの外で、子が強制的に変更され、この時点で参照を使用できます。

使用するコンポーネントに ref 属性を追加できます。これは、基になる DOM 要素またはコンポーネントマウントインスタンスを最初のパラメーターとして受け取るコールバック関数です。

input 要素には ref 属性があり、その値は実際の DOM 要素入力を取得してインスタンスに配置する関数であり、関数内でアクセスできるようにします handleSubmit 。

多くの場合、クラスコンポーネントでのみ機能すると誤解されています refsが、refsJS のクロージャを活用することで関数コンポーネントでも使用できます。

4. 反応でイベントを処理するには?

ブラウザー間の互換性の問題を解決するために、SyntheticEvent インスタンスはイベントハンドラー関数に渡されます。SyntheticEventこれは、React のブラウザーネイティブなイベントラッパーであり、やなどのブラウザーネイティブイベントと同じインターフェイスも備えてい stopPropagation() ます preventDefault()。

興味深いことに、React は実際にはイベントを子ノード自体にアタッチしません。React は、単一のイベントリスナーを使用して、トップレベルですべてのイベントをリッスンします。これはパフォーマンスに優れており、DOM を更新するときに React がイベントリスナーを追跡する必要がないことを意味します。

5. 状態と小道具の違いは何ですか?

同じ点: これらはすべて通常の js オブジェクトであり、レンダリング出力に影響する情報が含まれています。

違い: 状態は、コンポーネントがそれ自体でデータを管理し、独自の状態を制御し、可変であることです。

props は、外部から渡されるデータパラメータであり、不変です。

状態のないコンポーネントはステートレスコンポーネントと呼ばれ、状態のあるコンポーネントはステートフルコンポーネントと呼ばれます。

より多くの小道具を使用し、状態を減らします

6. 参照を作成する方法は?

React.createRef() によって作成され、react 要素に ref 属性を介してアタッチされます。

Refs コンポーネント全体で参照できるように、通常はインスタンスプロパティに割り当てられます。

7. 高次成分とは?

高次コンポーネント (HOC) は、コンポーネントを受け取り、新しいコンポーネントを返す関数です。基本的に、これは React の構成機能から派生したパターンであり、純粋なコンポーネントと呼ばれます。これは、動的に提供される子コンポーネントを受け入れることができますが、入力コンポーネントの動作を変更または複製しないためです。

HOC は、次のように多くのユースケースに使用できます。

コードの再利用、ロジック、およびブートストラップの抽象化
レンダーハイジャック
状態の抽象化と操作
小道具処理

8. コンストラクターで super を呼び出し、props をパラメーターとして渡す機能は何ですか?

super() サブクラスコンストラクターは、メソッドが呼び出されるまで参照を使用できませんthis。これは、ES6 サブクラスにも当てはまります。props パラメータを呼び出しに渡す主な理由は、super() サブコンストラクタでthis.props渡されるようにするためですprops。

props の動作はコンストラクタ内でのみ異なり、コンストラクタの外では同じです

9. 制御コンポーネントとは何ですか?

HTML では、やなどのフォーム要素は通常<input>、独自の状態を維持し、ユーザー入力に基づいて更新されます。ユーザーがフォームを送信すると、上記の要素の値がフォームと共に送信されます。<textarea><select>

React の動作は異なります。フォームを含むコンポーネントは、その状態の入力値を追跡し、onChange状態が更新されるためコールバック関数 (たとえば) が起動するたびにコンポーネントを再レンダリングします。このように React によって値が制御される入力フォーム要素は、被制御コンポーネントと呼ばれます。

10. React.createElement の方法は?

const element = (

  <h1 className="greeting">

    Hello, world!

  </h1>

)

const element = React.createElement(

  'h1',

  {className: 'greeting'},

  'Hello, world!'

);

11. jsx とは何ですか?

反応が最初にリリースされたとき、元の HTML テンプレートを JS コードに埋め込むために、新しい js 方言である jsx も導入されました。JSX コード自体はブラウザで読み取ることができないため、やなどのツールを使用して従来の JS に変換する必要がありますBabel。webpack多くの開発者は、すでに React と統合されているため、気付かないうちに JSX を使用できます。

12.状態を直接更新しないのはなぜですか?

状態を直接更新しようとすると、コンポーネントは再レンダリングされません

状態は、状態オブジェクトを更新する setState() メソッドを使用して更新する必要があり、状態が変化すると、コンポーネントは再レンダリングによって応答します。

13. React コンポーネントのライフサイクルのさまざまなフェーズは何ですか?

初期化: このフェーズでは、コンポーネントは初期化状態と既定のプロパティを設定する準備ができています。
Mounting : 反応コンポーネントをブラウザー DOM にマウントする準備ができました。このフェーズには、componentWillMountライフcomponentDidMountサイクルメソッドが含まれます。
Updating : このフェーズでは、コンポーネントは 2 つの方法で更新され、新しい props と state が送信されます。このフェーズにはshouldComponentUpdate、、componentWillUpdateおよびcomponentDidUpdateライフサイクルメソッドが含まれます。
アンマウント: この段階で、コンポーネントは不要になり、ブラウザー DOM からアンマウントされます。このフェーズには、 componentWillUnmount ライフサイクルメソッドが含まれています。

上記の 4 つの一般的なライフサイクルに加えて、エラー処理フェーズもあります。

エラー処理: この段階では、レンダリング中、ライフサイクルメソッド、または子コンポーネントのコンストラクターでエラーが発生するたびに、コンポーネントが呼び出されます。このフェーズには、 componentDidCatch ライフサイクルメソッドが含まれています。

14. 反応ライフサイクルメソッドとは何ですか?

componentWillMount: レンダリングの前に実行され、ルートコンポーネントでアプリレベルの構成に使用されます。
componentDidMount: 最初のレンダリングの後に実行されます。ここで、AJAX 要求、DOM 操作またはステータス更新を行い、イベントリスナーを設定できます。
componentWillReceiveProps: 初期化中には実行されませんrender。コンポーネントが新しい状態 (Props) を受け取ったときにトリガーされます。通常、親コンポーネントの状態が更新されたときに子コンポーネントを再レンダリングするために使用されます。
shouldComponentUpdate: コンポーネントを更新するかどうかを決定します。デフォルトでは、を返しますtrue。state これは、更新後または更新後にコンポーネントを再レンダリングする必要がないと判断された場合に props 返されますfalse。これは、パフォーマンスを向上させる方法です。
componentWillUpdate: コンポーネントを更新することを決定する前提条件shouldComponentUpdateを返す前に実行されます。true
componentDidUpdateprops: 主に、応答または変更で DOM を更新するために使用されますstate。
componentWillUnmount: ネットワーク要求をキャンセルするか、コンポーネントに関連付けられているすべてのイベントリスナーを削除するために使用されます。

15. React で使用される 3 つのドット (...) は何ですか?

スプレッド演算子またはスプレッド演算子は、既存のオブジェクトのほとんどのプロパティを持つ新しいオブジェクトを作成するのに便利で、状態を更新するときによく使用されます

16. React Hooks を使用する利点は何ですか?

フックはReact 16.8 で新しく追加されました。クラスを書かなくてもstateReact やその他の React 機能を使用できます。フックを使用すると、ステートフルロジックをコンポーネントから抽出して、個別にテストして再利用できます。フックを使用すると、コンポーネント階層を変更せずにステートフルロジックを再利用できるため、多くのコンポーネント間で、またはコミュニティとフックを簡単に共有できます。

フックはどのような問題を解決しますか?

クラスコンポーネントの機能の問題は関数コンポーネントで使用できます

17: React には何がありますか `useState()` ?

useState 組み込みの React Hook です。最初の引数がカウンターの現在の状態であるuseState(0) タプルを返し、カウンターの状態を更新するメソッドを提供します。countsetCounter

このメソッドを使用して、どこでもカウント状態を更新できますsetCounter。この場合、setCountフックを使用して関数内でより多くのことを行うことができ、コードをより機能的に保ち、クラスコンポーネントに基づく過度の使用を避けることができます。

状態のデータを定義し、パラメータは初期化されたデータ、戻り値は1.初期化値、2.修正方法の2つ

useState で変更されたメソッドは非同期です

useEffect を使用したデータ監視
Hooksのメソッドは自分で定義でき、メソッド内でロジックを返すことができる

18. React の StrictMode とは?

ReactStrictModeは、一連のコンポーネントをラップするために使用できるより良い反応コンポーネントを作成するのに役立つ補助コンポーネントであり<StrictMode />、次のことを確認するのに役立ちます。

内部コンポーネントが特定の推奨プラクティスに従っていることを確認し、そうでない場合はコンソールで警告します。
非推奨のメソッドが使用されていることを確認してください。使用されている場合は、コンソールに警告が表示されます。
潜在的なリスクを特定することで、いくつかの副作用を防ぎます。

19.クラスメソッドをクラスインスタンスにバインドする必要があるのはなぜですか?

js では、現在のコンテキストに応じて this の値が変化します. React クラスコンポーネントメソッドでは、開発者は通常、this が犯罪の現在のインスタンスを参照することを望んでいるため、これらのメソッドをインスタンスにバインドする必要があります。

20. 支柱掘削とは何ですか? また、それを回避する方法は?

React アプリケーションを構築するときは、複数のレベルでコンポーネントをネストして、別のネストされたコンポーネントによって提供されるデータを消費します。これを行う最も簡単な方法は、 prop ソースコンポーネントから深くネストされたコンポーネントまで、各コンポーネントから prop を渡すことです。これはprop drillingと呼ばれます。

prop drilling主な欠点は、データを必要としないコンポーネントが不必要に複雑になり、保守が困難になることです。

それを避けるためにprop drilling、一般的な方法はReact Contextを使用することです。データを提供するコンポーネントを定義しProvider、ネストされたコンポーネントがConsumerコンポーネントまたはフックを介してuseContext コンテキストデータを使用できるようにする

21. Flux と MVC について説明してください。

従来の MVC パターンは、データ (モデル)、UI (ビュー)、およびロジック (コントローラー) を分離するのに非常にうまく機能しますが、MVC アーキテクチャには、多くの場合、次の 2 つの主な問題があります。

不十分なデータフロー: ビュー間で発生するカスケード更新は、多くの場合、デバッグが困難な無秩序なイベントの Web につながります。

データの整合性の欠如: モデルデータはどこでも変化する可能性があり、UI 全体で予測できない結果が生じる可能性があります。

store Flux パターンを使用する複雑な UI は、カスケード更新の影響を受けなくなりました。特定の React コンポーネントは、提供されたデータに基づいてその状態を再構築できます。Flux パターンは、共有データへの直接アクセスを制限することにより、データの整合性も強化します。

22.制御されたコンポーネントと制御されていないコンポーネントの違いは何ですか?

制御されたコンポーネントは、 React コントロール内のコンポーネントであり、フォームデータの唯一の信頼できるソースです。
非制御コンポーネントは、React コンポーネントではなく、DOM によってフォームデータが処理される場所です。

refsアンマネージコンポーネントは、単純にDOM から値を取得するために使用できるため、通常は実装が容易ですが、一般的には、アンマネージコンポーネントよりも制御されたコンポーネントを優先することをお勧めします。

これの主な理由は、制御されたコンポーネントがオンザフライのフィールド検証をサポートし、条件付きで無効化/有効化するボタンを許可し、入力フォーマットを強制することです。

23. React コンテキストとは?

Contextprops コンポーネントツリーを介してデータを渡す方法を提供し、各レベルでプロパティを手動で渡す必要をなくします。

24.リアクトファイバーとは?

ファイバーは 、React 16 のコアアルゴリズムの新しい調整エンジンまたは再実装です。その主な目標は、仮想 DOM のインクリメンタルレンダリングをサポートすることです。React Fiber の目標は、アニメーション、レイアウト、ジェスチャ、一時停止、中止、または再利用の使いやすさを改善し、さまざまな種類の更新や新しい同時実行プリミティブに優先順位を割り当てることです。

React Fiber の目標は、アニメーション、レイアウト、ジェスチャーなどの分野での適用性を高めることです。その主な機能はインクリメンタルレンダリングです。レンダリング作業をチャンクに分割し、複数のフレームに分散させる機能です。

25. ReactJS で Props に検証を適用する方法は?

アプリケーションが開発モードで実行されている場合、React はコンポーネントに設定したすべてのデータを自動的にチェックして、 propsそれらが正しいデータ型であることを確認します。型が正しくない場合、開発モードではコンソールに警告メッセージが生成され、パフォーマンスへの影響があるため、本番モードでは無効になります。props 定義上必須 isRequired。

以下は、事前定義された prop タイプのセットです。

React.PropTypes.string
React.PropTypes.number
React.PropTypes.func
React.PropTypes.node
React.PropTypes.bool

26. React でコンストラクターを使用する場合と getInitialState を使用する場合の違いは何ですか?

コンストラクターとの違いは、と自体getInitialStateの違いです。クラスを使用する場合は、コンストラクターで初期化し、使用時にメソッドを定義する必要があります。ES6ES5ES6stateReact.createClassgetInitialState

27.フックは高次のコンポーネントに取って代わりますか ?`render props`

render props高次のコンポーネントは、子コンポーネントを 1 つだけレンダリングします。React チームは、フックがこのユースケースに対応するためのより簡単な方法であると考えています。

どちらのパターンにもそれぞれの場所があります (たとえば、仮想 scroller コンポーネントにがある場合 renderItem propや、ビジュアルコンテナーコンポーネントに独自の DOM 構造がある場合など)。しかし、ほとんどの場合、フックで十分であり、ツリー内のネストを減らすのに役立ちます

28.コンポーネントの再レンダリングを避けるには?

React で最も一般的な問題の 1 つは、コンポーネントが不必要に再レンダリングされることです。React は、これらの状況で役立つ 2 つのメソッドを提供します。

React.memo(): これにより、関数コンポーネントが不必要に再レンダリングされるのを防ぎます
PureComponent: これにより、クラスコンポーネントの不要な再レンダリングが防止されます。

これらのメソッドはどちらもprops、コンポーネントに渡される内容の浅い比較に依存しており、 props 変更されていない場合、コンポーネントは再レンダリングされません。どちらのツールも非常に便利ですが、浅い比較ではパフォーマンスがさらに低下するため、どちらの方法も間違って使用するとパフォーマンスに悪影響を与える可能性があります。

React Profilerを使用すると、これらのメソッドを使用する前後でパフォーマンスを測定でき、特定の変更を加えることで実際にパフォーマンスが向上することを確認できます。

29.純関数とは?

純粋な関数とは、依存関係がなく、スコープ外の変数の状態を変更しない関数です。基本的に、純粋関数は、同じ引数を指定すると常に同じ結果を返します。

30.呼び出されたときの`setState`React `render` の動作

仮想 DOM レンダリング:renderメソッドが呼び出されると、新しいコンポーネントの仮想 DOM 構造が返されます。呼び出されるとsetState()、renderデフォルトでshouldComponentUpdate常に返されるため、再度呼び出されますtrue。そのため、React はデフォルトでは最適化されていません。
ネイティブ DOM レンダリング: React は仮想 DOM 内の実際の DOM ノードのみを変更し、変更の数は非常に少なくなります。これは、実際の DOM の変更を最適化し、React を高速化する React の優れた機能です。

31. React でインスタンスの再バインドを回避するには?

1. イベントハンドラーをインラインアロー関数として定義する

class SubmitButton extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isFormSubmitted: false

    };

  }

 

  render() {

    return (

      <button onClick={() => {

        this.setState({ isFormSubmitted: true });

      }}>Submit</button>

    )

  }

}

2. アロー関数を使用してメソッドを定義します。

class SubmitButton extends React.Component {

  state = {

    isFormSubmitted: false

  }

 

  handleSubmit = () => {

    this.setState({

      isFormSubmitted: true

    });

  }

 

  render() {

    return (

      <button onClick={this.handleSubmit}>Submit</button>

    )

  }

}

3.フックで関数コンポーネントを使用する

const SubmitButton = () => {

  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

 

  return (

    <button onClick={() => {

        setIsFormSubmitted(true);

    }}>Submit</button>

  )

};

32. Real DOM と Virtual DOM を区別しますか?

実DOM	仮想DOM
1.更新が遅い。	1.更新を高速化します。
2. HTML を直接更新できます。	2. HTML を直接更新することはできません。
3. 要素が更新されると、新しい DOM が作成されます。	3. 要素が更新された場合は、JSX を更新します。
4. DOM 操作は高価です。	4. DOM 操作は非常に簡単です。
5. より多くのメモリが消費されます。	5. メモリ消費量が非常に少ない。

33. Reactとは?

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

34. Reactの特徴は?

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

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

35. React の主な利点を挙げてください

アプリケーションのパフォーマンスが向上します
クライアント側とサーバー側で簡単に使用できます
JSX による優れたコードの可読性
React は、Meteor、Angular などの他のフレームワークと簡単に統合できます
React を使用すると、UI テストケースの作成が非常に簡単になります

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

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

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

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

38. React の ES6 構文は ES5 とどう違うのですか?

1.requireとインポート

2.輸出と輸出

3.成分和機能

4.小道具

5.状態

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

テーマ	反応する	角度
1. 建築	MVC でのみ表示	完全な MVC
2. レンダリング	サーバー側のレンダリングを行うことができます	クライアントレンダリング
3. ドム	仮想 DOM を使用する	実際の DOM を使用する
4. データバインディング	一方向データバインディング	双方向データバインディング
5. デバッグ	コンパイル時デバッグ	実行時デバッグ
6. 作者	フェイスブック	グーグル

40. 「React では、すべてがコンポーネントである」というフレーズをどのように理解していますか?

コンポーネントは、React アプリの UI の構成要素です。これらのコンポーネントは、UI 全体を小さな独立した再利用可能な部分に分割します。各コンポーネントは、UI の残りの部分に影響を与えることなく、互いに独立しています。

41. React で render() の目的を説明する方法

すべての React コンポーネントには render()が必須です。ネイティブ DOM コンポーネントの表現である React 要素を返します。複数の HTML 要素をレンダリングする必要がある場合は、それらを、<form>などの単一の囲みタグ内にグループ化する必要があります。この関数は純粋でなければなりません。つまり、呼び出されるたびに同じ結果を返さなければなりません。<group><p>

42.小道具とは?

Props は React のプロパティの省略形です。それらは読み取り専用のコンポーネントであり、純粋である必要があります。つまり、不変です。これらは、アプリケーション全体で常に親コンポーネントから子コンポーネントに渡されます。子コンポーネントは props を親に送り返すべきではありません。これは一方向のデータフローを維持するのに役立ち、動的に生成されたデータをレンダリングするためによく使用されます。

43. React の状態とは? どのように使用されますか？

状態は React コンポーネントの中核であり、データのソースであり、可能な限り単純でなければなりません。基本的に状態は、コンポーネントのレンダリングと動作を決定するオブジェクトです。props とは異なり、変更可能で、動的でインタラクティブなコンポーネントを作成します。経由でアクセスでき this.state() ます

44.状態と小道具を区別する

状態	州	小道具
1. 親コンポーネントから初期値を受け取る	はい	はい
2.親コンポーネントは値を変更できます	いいえ	はい
3. コンポーネントにデフォルト値を設定する	はい	はい
4. コンポーネント内の変更	はい	いいえ
5.子コンポーネントの初期値を設定する	はい	はい
6.子コンポーネント内の変更	いいえ	はい

45. コンポーネントの状態を更新するには?

コンポーネントの状態はで更新できます this.setState()。

46. React のアロー関数とは? 使い方？

アロー関数 ( => ) は、関数式を記述するための短い構文です。ES6 ではデフォルトで自動バインドが使用できないため、これらの関数を使用すると、コンポーネントのコンテキストを適切にバインドできます。アロー関数は、高階関数を扱う場合に非常に便利です

47. ステートフルコンポーネントとステートレスコンポーネントを区別する

ステートフルコンポーネント	ステートレスコンポーネント
1. コンポーネントの状態変化に関する情報をメモリに保存する	1. コンポーネントの内部状態を計算する
2. 状態を変更する権利	2. 状態を変更する権利がない
3. 過去、現在、将来の状態変化を含める	3. 過去、現在、将来の可能な状態変化は含まれません
4. ステートレスコンポーネントの状態変更要件の通知を受け取り、それらに props を送信します。	4. ステートフルコンポーネントから props を受け取り、それらをコールバック関数として扱います。

48. React のイベントとは?

React では、イベントは、マウスホバー、マウスクリック、キー押下などの特定のアクションに対する反応としてトリガーされます。これらのイベントの処理は、DOM 要素のイベントの処理に似ています。ただし、次のような構文の違いがいくつかあります。

イベント名には、小文字だけでなくキャメルケースを使用してください。
イベントは、文字列ではなく関数として渡されます。

イベントパラメータには、一連のイベント固有のプロパティが含まれています。各イベントタイプには独自のプロパティと動作が含まれており、イベントハンドラーを介してのみアクセスできます。

49. React の合成イベントとは?

合成イベントは、ブラウザー固有のイベントのクロスブラウザーラッパーとして機能するオブジェクトです。さまざまなブラウザーの動作を 1 つの API に結合します。これは、イベントがブラウザ間で一貫したプロパティを表示するようにするために行われます。

50. React におけるキーの重要性は何ですか?

キーは、一意の Virtual DOM 要素とそれに対応する UI を駆動するデータを識別するために使用されます。それらは、現在 DOM にあるすべての要素をリサイクルすることで、React がレンダリングを最適化するのに役立ちます。これらのキーは一意の数字または文字列でなければなりません。React は要素を再レンダリングする代わりに並べ替えるだけです。これにより、アプリケーションのパフォーマンスが向上します

51. Redux とは?

Redux は、今日最もホットなフロントエンド開発ライブラリの 1 つです。アプリケーション全体の状態管理に使用される、JavaScript プログラムの予測可能な状態コンテナーです。Redux で開発されたアプリはテストが容易で、さまざまな環境で実行でき、一貫した動作を示します。

52. Redux が従う 3 つの原則は何ですか?

信頼できる唯一の情報源:アプリケーション全体の状態は、単一のストア内のオブジェクト/状態ツリーに格納されます。単一の状態ツリーにより、時間の経過に伴う変化の追跡と、アプリケーションのデバッグまたは検査が容易になります。
状態は読み取り専用です。状態を変更する唯一の方法は、アクションをトリガーすることです。アクションは、変更を記述する単純な JS オブジェクトです。状態がデータの最小限の表現であるように、操作はデータへの変更の最小限の表現です。
純粋関数を使用した変更:状態ツリーが操作によってどのように変換されるかを指定するには、純粋関数が必要です。純粋な関数とは、戻り値が引数の値のみに依存する関数です。

53. 「唯一の真実の情報源」とは何を理解していますか?

Redux は「ストア」を使用して、プログラムの状態全体を 1 か所に保存します。したがって、すべてのコンポーネントの状態はストアに保存され、ストア自体から更新を受け取ります。単一の状態ツリーにより、時間の経過に伴う変更の追跡と、プログラムのデバッグまたは検査が容易になります

54. Redux のコンポーネントを一覧表示する

アクション - これは何が起こったかを説明するオブジェクトです。
Reducer - これは、状態がどのように変化するかを決定する場所です。
Store - プログラム全体の状態/オブジェクトツリーが Store に保持されます。
表示 - ストアから提供されたデータのみを表示します。

55. データは Redux をどのように流れますか?

56. Redux でアクションを定義する方法

React のアクションには、実行される ACTION のタイプを示す type 属性が必要です。これらは文字列定数として定義する必要があり、さらにプロパティを追加することもできます。Redux では、Action Creators と呼ばれる関数によってアクションが作成されます。

57. Reducer の役割を説明する

Reducer は、ACTION に応答してアプリケーションの状態がどのように変化するかを指定する純粋な関数です。レデューサーは、以前の状態とアクションを取得してから、新しい状態を返します。操作の種類に基づいて実行する必要がある更新の種類を判断し、新しい値を返します。タスクを完了する必要がなければ、元の状態に戻ります

58. Store in Redux の意義は何ですか

Store は、プログラムの状態を保持し、状態へのアクセス、操作のディスパッチ、リスナーの登録を行うメソッドを提供する JavaScript オブジェクトです。アプリケーションの状態/オブジェクトツリー全体が 1 つのストアに保持されます。したがって、Redux は非常にシンプルで予測可能です。データを処理し、ストアの状態を変更するさまざまな操作を記録するために、ミドルウェアをストアに渡すことができます。すべての操作は、レデューサーを介して新しい状態を返します。

59. Redux の利点は何ですか?

Redux の利点は次のとおりです。

結果の予測可能性 - 信頼できる情報源は常に 1 つ (ストア) であるため、現在の状態をアクションやアプリの他の部分とどのように同期させるかは問題ではありません。
保守性 - 予測可能な結果と厳密な構造により、コードの保守が容易になります。
サーバー側レンダリング - サーバー上に作成されたストアをクライアントに渡すだけです。これは、初期レンダリングに役立ち、アプリのパフォーマンスを最適化してユーザーエクスペリエンスを向上させます。
開発者ツール - アクションから状態の変化まで、開発者はアプリ内で起こっているすべてをリアルタイムで追跡できます。
コミュニティとエコシステム - Redux の背後には巨大なコミュニティがあり、Redux をさらに魅力的なものにしています。才能のある個人の大規模なコミュニティが図書館の改善に貢献し、さまざまなアプリケーションを開発しました。
テストの容易さ - Redux のコードはほとんどが小さく、純粋で自己完結型の関数です。これにより、コードがテスト可能になり、自己完結型になります。
組織 - Redux は、コードがどのように構成されているかを正確に説明します。これにより、チームが使用するときにコードがより一貫してシンプルになります。

60. Reactルーティングとは

React Routing は、React 上に構築された強力なルーティングライブラリであり、新しい画面やフローをアプリケーションに追加するのに役立ちます。これにより、URL が Web ページに表示されるデータと同期されます。標準化された構造と動作の維持を担当し、単一ページの Web アプリケーションの開発に使用されます。React ルーティングにはシンプルな API があります

61. React Router v4 で switch キーワードが使用される理由

<p> Router で複数のルートをカプセル化するために使用されますが、「switch」キーワードは、複数の定義済みルートの中でレンダリングされる 1 つのルートのみを表示する場合に使用できます。タグを使用すると、<switch> 定義済みの URL と定義済みのルートが順番に一致します。最初の一致を見つけた後、指定されたパスをレンダリングします。それによって他のルートを迂回する

62. React でルーティングが必要なのはなぜですか?

Router は複数のルートを定義するために使用されます。ユーザーが特定の URL を定義すると、この URL が Router 内で定義された「ルート」のパスと一致する場合、ユーザーはその特定のルートにリダイレクトされます。したがって、基本的には、複数のルートを作成できるようにする Router ライブラリをアプリケーションに追加する必要があります。それぞれのルートが独自のビューを提供します。

63. React Router の利点を挙げてください。

React がコンポーネントに基づいているように、React Router v4 の API は 'All About Components'です。ルーターは、<BrowserRouter>特定のサブルート<route>をラップする単一のルートコンポーネント ( ) として視覚化できます ( )。
履歴値を手動で設定する必要はありません: React Router v4 では、ルートをコンポーネントにラップするだけで済みました <BrowserRouter> 。
パッケージは分離されています。Web、Native、および Core の 3 つのパッケージがあります。これにより、アプリケーションがよりコンパクトになります。同様のコーディングスタイルに基づいて簡単に切り替え可能

64. React Router は通常のルーティングとどう違うのですか?

テーマ	通常のルーティング	反応ルーティング
参加ページ	各ビューは新しいファイルに対応します	単一の HTML ページのみを含む
URL の変更	HTTP リクエストがサーバーに送信され、対応する HTML ページが受信されます	変更履歴のプロパティのみ
体験する	ユーザーは実際に各ビューの異なるページを切り替えます	ユーザーは、別のページを切り替えていると考えています

65. よく使われるフック

useState:状態のデータを定義、パラメータは初期化されたデータ、戻り値は1.初期化値、2.修正方法の2つ

useEffect: 副作用関数、その名の通り、使用後にのみ副作用が発生します

ライフサイクルとして使用します。2 番目のパラメーターが記述されていない場合、ページが更新されたときにトリガーされます。
2 番目のパラメーターが空の配列の場合、一度だけ実行されます。
配列内の一部の変数は、データの変更を監視するためのリスナーとして使用されます。
useEffect は、コンポーネントの更新が完了した後にトリガーされる副作用関数です。
useEffect から関数を返す場合、コンポーネントが破棄されたときにトリガーします

useMemo: データを計算し、結果を返し、データの変更を監視するために使用されます. 2番目のパラメータは、キャッシュ可能な監視対象データです.

useMemo や useEffect と比較して、useMemo はコンポーネントの更新時にライフサイクルを開始します。

useMemo はどのようにパフォーマンスを最適化しますか?

親コンポーネントが子コンポーネントと通信すると、親コンポーネントのデータが変更されます. 親コンポーネントを更新すると、子コンポーネントが更新されてレンダリングされますが、変更されたデータが子コンポーネントとは関係がない場合は、子コンポーネントを更新します.コンポーネントは子コンポーネントに不要な DOM を発生させますレンダリングはより多くのパフォーマンスを消費します. 現時点では、useMemo または memo をコンポーネントキャッシュとして使用して、サブコンポーネントの不要な DOM レンダリングを減らすことができます.

useCallback: 親コンポーネントが子コンポーネントに関数を渡すと、親コンポーネントの変更により、関数の再呼び出しが新しいスコープを生成するため、子コンポーネントの更新レンダリングが引き続き発生します。コンポーネントをキャッシュするために useCallback を使用できます

useRef: createRef の使用に相当し、コンポーネントの属性情報を作成します

useContext: 関数部品でコンテキスト状態番号の内容情報を取得することに相当します。

useReducer: useReducer は、useState の不足を補うために使用され、データを集中管理し、データの論理情報を個別に処理できます。

66. 反応で ref を使用するには?

1. 文字列を直接記述できますが、クラスコンポーネントにのみ適用されます

2. createRef および useRef を使用して ref 変数を定義し、ref.current を使用してデータを取得します。

3.アロー関数メソッドを使用して事前に変数を定義でき、アロー関数の仮パラメーターは現在のオブジェクトです

const App = ()=>{
  let h = useRef();

  let inp = null;//定义一个空变量

  const setVal = ()=>{
    console.log(inp.value);
  }
  return (
    <div>
      <h3 ref={h}>ceshi</h3>
      <button onClick={()=>console.log(h.current)}>获取</button>

      <hr />
      <input placeholder="输入内容" ref={(el)=>{ inp = el; }} onChange={setVal}/>
    </div>
  )
}

ref 属性を関数サブコンポーネントに直接バインドすることはできません. 関数コンポーネントにはこのオブジェクトがなく, 関数サブコンポーネントのオブジェクトコンテンツを取得することはできません. 最後に, 関数コンポーネント forwardRef 高次コンポーネントコンポーネントは ref 属性をに渡すことができます.パラメーター parameter を介した関数サブコンポーネント内部的には、ref 属性を転送する操作