1. ブラウザが JSX を読み取れないのはなぜですか?
ブラウザは JavaScript オブジェクトのみを処理でき、通常の JavaScript オブジェクト内の JSX を読み取ることはできません。
したがって、ブラウザが JSX を読み取るためには、まず Babel などの JSX コンバータを使用して JSX ファイルを JavaScript オブジェクトに変換し、それをブラウザに渡す必要があります。
2.React の ref とその機能は何ですか?
refs は React における参照の略称です。これは、コンポーネントのレンダリング設定関数によって返されます。render() によって返される特定の要素またはコンポーネントへの参照。
3.Reactのrender()の目的
すべての React コンポーネントには render() が必要です。ネイティブ DOM コンポーネントの表現である React 要素を返します。
4. Reactコンポーネントのライフサイクルメソッド
- ComponentWillMount - クライアントとサーバーの両方でレンダリング前に実行されます。
- ComponentDidMount - 最初のレンダリング後にクライアント側でのみ実行されます。
- ComponentWillReceiveProps - プロパティが親クラスから受信されたとき、別のレンダラーを呼び出す前に呼び出されます。
- shouldComponentUpdate - 特定の条件に基づいて true または false を返します。
- ComponentWillUpdate - DOM でレンダリングする前に呼び出されます。
- ComponentDidUpdate - レンダリングが発生した直後に呼び出されます
- ComponentWillUnmount – DOM からコンポーネントをアンマウントした後に呼び出されます。
5. React の仕組み
React は仮想 DOM を作成します。コンポーネントの状態が変化すると、React はまず差分アルゴリズムを通じて仮想 DOM 内の変化をマークします。2 番目のステップは調整で、diff 結果を使用して DOM を更新します。
6.Redux が従う 3 つの原則は何ですか?
- 唯一の信頼できる情報源: アプリケーションの状態全体が、単一ストアのオブジェクト/状態ツリーに保存されます。単一の状態ツリーにより、時間の経過に伴う変化の追跡やアプリケーションのデバッグや検査が容易になります。
- 状態は読み取り専用です。状態を変更する唯一の方法は、アクションをトリガーすることです。アクションは変更を記述する通常の JS オブジェクトであり、状態がデータの最小限の表現であるのと同様に、操作もデータへの変更の最小限の表現です。
- 純粋関数を使用した変更: ステート ツリーが操作によってどのように変換されるかを指定するには、純粋関数が必要です。
7. setState に渡されるパラメータはオブジェクトではなくコールバックであることが推奨されるのはなぜですか?
this.props と this.state の更新は非同期である可能性があるため、次の状態を計算するためにそれらの値に依存することはできません。
8.唯一の真実の情報源とは何ですか?
Redux はストアを使用して、プログラムの状態全体を 1 か所に保存します。したがって、すべてのコンポーネントの状態はストアに保存され、ストア自体から更新を受け取ります。単一の状態ツリーにより、時間の経過に伴う変化の追跡やプログラムのデバッグや検査が容易になります。
9. 高次成分 (HOC) とは何ですか? 何ができるのでしょうか？
高次コンポーネントは、コンポーネント ロジックを再利用する高度な方法であり、React から派生したコンポーネント パターンです。HOC は、その中に別のコンポーネントを含むカスタム コンポーネントです。子コンポーネントによって提供されるダイナミクスを受け取ることができますが、入力コンポーネントの動作を変更したりコピーしたりすることはありません。
HOC は多くのタスクに使用できます。
- コードの再利用、ロジック、およびブートストラップの抽象化
- レンダリングハイジャック
- 状態の抽象化と制御
- プロップコントロール
10. VirtualDOM とその動作原理について簡単に説明します
仮想 DOM は軽量の JavaScript オブジェクトであり、最初は実際の DOM の単なるコピーです。は、要素とそのプロパティ、およびオブジェクトとそのプロパティとしてのコンテンツを含むノードのツリーです。React の render 関数は、React コンポーネントからノードのツリーを作成します。次に、ユーザーまたはシステムによって実行されたさまざまなアクションによって引き起こされるデータ モデルの変更に応じてツリーを更新します。
仮想 DOM の作業プロセスには、次の 3 つの簡単な手順があります。
- 基礎となるデータが変更されるたびに、仮想 DOM の説明で UI 全体が再レンダリングされます。
- 以前の DOM 表現と新しい DOM 表現の違いを計算します。
- 計算が完了すると、実際の DOM は実際に変更されたコンテンツのみで更新されます。
11.クラスコンポーネントと関数コンポーネントの違いは何ですか?
- クラスコンポーネントは状態やライフサイクルなどの他の機能を使用できます。
- 関数コンポーネントは props を受け取ってページにレンダリングすることしかできませんが、ステートレス コンポーネントには this がなく、ライフサイクルを使用できません。使用するにはフック等の導入が必要です
- 関数コンポーネントは、クラスコンポーネントをインスタンス化して使用する必要があるのに対し、関数コンポーネントは直接実行して結果を返すことができるため、クラスコンポーネントよりもパフォーマンスが高くなります。パフォーマンスを向上させるには、関数コンポーネントを使用するようにしてください。
12.state と props の違いは何ですか?
類似点: これらはすべて通常の js オブジェクトであり、レンダリング出力情報が含まれています
相違点: 状態はコンポーネント自体によって管理されるデータであり、コンポーネント自体の状態を制御します 変更可能です. Props は外部から渡されるデータ パラメーターです 状態がなければ不変
ですステートレス コンポーネントと呼ばれる、状態を持つコンポーネントはステートフル コンポーネントと呼ばれます。
プロパティをより多く使用し、ステートを少なくします。
13. 状態を直接更新しないのはなぜですか?
状態を直接更新した場合、コンポーネントは再レンダリングされません。
状態を更新するには setState メソッドを使用する必要があります。これにより、状態オブジェクトが更新されます。状態が変化すると、コンポーネントは再レンダリングによって応答します。
14.制御コンポーネントとは何ですか?
HTML では、input、textarea などのフォーム要素は通常、独自の状態を維持し、ユーザー入力に基づいて更新されます。ユーザーがフォームを送信すると、上記の要素の値がフォームとともに送信されます。
React の動作は異なります。フォームを含むコンポーネントはその状態の入力値を追跡し、状態が更新されるためコールバック関数が起動されるたびにコンポーネントを再レンダリングします。このようにReactによって値が制御される入力フォーム要素を制御コンポーネントと呼びます。
15. React Hooks を使用する利点は何ですか?
フックは React 16.8 に新しく追加されたもので、クラスを作成せずに状態やその他の React 機能を使用できるようにします。フックを使用すると、ステートフル ロジックをコンポーネントから抽出できるため、独立してテストして再利用できます。
フールはどのような問題を解決しますか?
クラスコンポーネントの機能を関数コンポーネントで使用する問題