面接でよくある質問に答える 2

1.setState は同期ですか、それとも非同期ですか?

React では、setState 状態は非同期で更新されます。これは、連続して複数回呼び出したとしても setState、実際の DOM 更新は 1 回しか実行されないことを意味します。React は setState 複数の呼び出しをバッチ処理し、DOM に状態を書き込む更新を 1 回だけ実行します。

ただし、React は状態を同期的に更新する方法も提供しますforceUpdate。このメソッドは、コンポーネントの状態が変更されたかどうか、または他のコンポーネントの状態が変更されたかどうかに関係なく、コンポーネント内で即時再レンダリングを強制できます。ただし、React の最適化アルゴリズムが壊れてパフォーマンスの問題が発生する可能性があるため、タイマーの使用やアニメーションの移動など、必要な場合にのみ forceUpdate メソッドを使用することをお勧めします。

2.反応合成イベントとは何ですか? ネイティブイベントとの違い

React 合成イベントは、React によって DOM 上でカプセル化されたイベントであり、React によって実装され、ネイティブブラウザイベントとは異なります。React 合成イベントは、クロスブラウザーおよびクロスプラットフォームのソリューションを提供するため、開発者は、異なるブラウザー間の互換性の問題を心配することなく、一貫したイベント処理を使用できます。

React の合成イベントとネイティブイベントの違いは次のとおりです。

イベント処理方法は異なります: React 合成イベントはイベント委任を使用し、すべてのイベントはルートノードにバインドされ、イベントバブリングメカニズムを通じて実行のためにターゲットノードに配信されます。ネイティブイベントは、イベント処理関数をターゲットノードに直接バインドします。
同期メカニズムと非同期メカニズムは異なります: React 合成イベントは非同期バッチ更新メカニズムを使用します。複数のイベントがトリガーされると、React はそれらをマージして状態を一度に更新し、状態の複数の更新を回避します。ネイティブイベントはイベント処理関数を同期的にトリガーし、イベントがトリガーされるたびにステータスが更新されます。
イベントオブジェクトのプロパティは異なります: React 合成イベントオブジェクトはネイティブイベントオブジェクトをカプセル化し、そのプロパティとメソッドはネイティブイベントオブジェクトとは異なります。たとえば、React 合成イベントオブジェクトにはデフォルトイベントのバブリングやブロックなどのメソッドはありませんが、カスタムメソッドを使用して実装されます。
異なる互換性: React 合成イベントは、さまざまなブラウザーやプラットフォームで一貫した動作を保証できますが、ネイティブイベントには互換性の問題があり、ブラウザーごとにサポートされるイベントタイプとイベント属性も異なります。

3. 仮想 DOM とは何ですか? VirtualDOM とその仕組み

仮想 DOM (仮想 DOM) は、JavaScript オブジェクト表現であり、実際の DOM の軽量の仮想イメージです。仮想 DOM は実際の DOM を操作しながら、仮想 DOM ツリーと呼ばれる仮想ツリーを生成します。仮想 DOM ツリーを操作する効率は、実際の DOM ツリーを直接操作するよりもはるかに高くなります。

仮想 DOM は次のように機能します。

アプリケーションの状態が変化すると、Virtual DOM は新しい仮想 DOM ツリーを生成します。
次に、新しく生成された仮想 DOM ツリーと古い仮想 DOM ツリーを比較して、相違点 (つまり、更新する必要があるノード) を見つけます。
仮想 DOM は更新が必要な部分のみを更新し、その差分を実際の DOM ツリーに適用します。
最後に、ブラウザは最新の DOM ツリーをレンダリングします。

仮想 DOM を使用すると、フロントエンド開発者は実際の DOM を手動で操作する複雑で非効率なプロセスを回避できます。仮想 DOM はアプリケーションのパフォーマンスと応答性を向上させ、より良いユーザーエクスペリエンスを提供します。

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

React でよく使用される 2 つのコンポーネントは、クラスコンポーネントと関数コンポーネントです。それらの主な違いは次のとおりです。

構文: クラスコンポーネントはクラスの形式で定義され、関数コンポーネントは関数の形式で定義されます。
状態管理: クラスコンポーネントは状態管理をサポートしており、コンポーネントの状態を保存するために使用できますstate。React Hooks の導入後は、関数コンポーネントを使用してuseState状態を管理することもできます。
ライフサイクル: クラスコンポーネントには、コンポーネントの作成、更新、または破棄時に特定のコードを実行する独自のライフサイクルメソッドがあります。React Hooks の導入後は、関数コンポーネントを使用してuseEffectライフサイクルのような操作を実行することもできます。
パフォーマンス: 関数コンポーネントは、インスタンス化を必要とせず、インスタンスメソッドや状態を維持する必要がないため、一般にクラスコンポーネントよりも軽量です。その結果、関数コンポーネントのレンダリングが高速になり、使用するメモリが少なくなります。

要約すると、コンポーネントの状態メソッドまたはライフサイクルメソッドを使用する必要がある場合は、クラスコンポーネントを使用する必要があります。プロパティに基づいてコンポーネントをレンダリングするだけの場合は、関数コンポーネントを使用する方が簡単で効率的です。React Hooks の導入後、関数コンポーネントは機能的にクラスコンポーネントと同等になったため、新しいプロジェクトで関数コンポーネントを使用することが非常に一般的になっています。

5.React では ref は何に使用されますか?

Ref は React で DOM 要素またはコンポーネントインスタンスにアクセスするために使用されます。ref を使用すると、レンダリングされた要素またはコンポーネントのインスタンスを取得し、必要に応じて、親コンポーネントを介した中間パスを使用せずに、そのプロパティまたはメソッドを直接操作できます。

Ref は次の状況で使用できます。

フォーカス、選択したテキスト、またはメディアの再生を管理します。
命令型アニメーションをトリガーします。
サードパーティの DOM ライブラリを統合します。

ref を使用するには、コンポーネント内に ref オブジェクトを作成し、アクセスする必要がある DOM 要素またはコンポーネントインスタンスにそれを渡す必要があります。コンポーネントのコンストラクターで ref オブジェクトを初期化することも、JSX 要素のコールバック関数を使用して ref を定義することもできます。

ref を使用するときは注意が必要です。ref を多用すると、コードの理解、保守、テストが困難になる可能性があります。したがって、コンポーネントの動作と状態を管理するには、まず React コンポーネントの props と state を使用する必要があります。

6.state と props の違いは何ですか?

React では、state と props の両方を使用してコンポーネントデータを管理します。ただし、それらの間にはいくつかの重要な違いがあります。

状態はコンポーネント内の変数データであり、this.setState() メソッドを通じて変更できます。小道具は親コンポーネントから子コンポーネントに渡される不変のデータであり、子コンポーネントは小道具を直接変更できません。
State はコンポーネント内でのみ変更できますが、props はコンポーネント内で変更できません。
状態はコンポーネントのコンストラクターで初期化できますが、props は親コンポーネントから渡す必要があります。
State の変更はコンポーネントの再レンダリングをトリガーし、props の変更もコンポーネントの再レンダリングをトリガーしますが、props が変更された場合にのみ、プロパティが子コンポーネントに再渡されます。

要約すると、state はコンポーネント内で維持される変更可能なデータであり、props は親コンポーネントから子コンポーネントに渡される不変のデータであり、これを通じてコンポーネント間の通信とデータ共有を実現できます。

7. ref の作成方法と使用シナリオ

Ref は、DOM ノードまたはコンポーネントインスタンスにアクセスするために React で使用されるメカニズムです。Ref は props と同様に React コンポーネントに渡すことができますが、ref は、props を介してデータを渡すのではなく、コンポーネント内の DOM 要素またはコンポーネントインスタンスに直接アクセスする方法です。createRef またはコールバック関数を使用して参照を作成できます。

createRef を使用して参照を作成する

createRef を使用して参照を作成します。コンポーネント内に ref オブジェクトを作成し、その ref オブジェクトをコンポーネントの要素またはコンポーネントに割り当てることができます。この ref オブジェクトを通じて、要素またはコンポーネントのインスタンスに直接アクセスできます。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}

上記のコードでは、createRef を使用して ref オブジェクトを作成し、それをコンポーネントの div 要素に割り当て、コンポーネントのcomponentDidMount ライフサイクル中にこの div 要素のインスタンスにアクセスします。

コールバック関数を使用して参照を作成する

コールバック関数を使用して ref を作成します。コールバック関数のパラメータとして ref オブジェクトをコンポーネントに渡すことができます。このパラメータを通じて、要素またはコンポーネントのインスタンスにアクセスできます。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    console.log(this.myRef);
  }

  render() {
    return <div ref={this.setMyRef}>Hello World</div>;
  }
}

上記のコードでは、setMyRef コールバック関数のパラメーターとして ref オブジェクトをコンポーネントの div 要素に渡しており、このパラメーターを通じて div 要素のインスタンスにアクセスできます。

使用するシーン

refs を使用すると、コンポーネント内の DOM 要素またはコンポーネントインスタンスにアクセスできるため、次のシナリオでは refs を使用する方が便利です。

入力ボックスの値またはフォーカスを取得します。
DOM 操作を通じて要素のスタイルを変更したり、要素の属性を操作したりできます。
コンポーネントのインスタンスにアクセスし、コンポーネントのメソッドまたはプロパティを直接呼び出します。

8. 関数コンポーネントとクラスコンポーネントのライフサイクル

React のライフサイクルメソッドは、コンポーネントがさまざまな段階で実行する一連のメソッドを指します。これらは、マウント、更新、アンマウントの 3 つのフェーズに分かれています。ライフサイクルメソッドは、特定のタスクと操作を処理するために使用され、アプリケーションのパフォーマンスの最適化に役立ちます。

React の関数コンポーネントとクラスコンポーネントのライフサイクルメソッドにはいくつかの違いがあります。

機能コンポーネントのライフサイクル:

ComponentDidMount : 関数コンポーネントにはcomponentDidMountメソッドはありませんが、useEffectフックを使用してcomponentDidMountの動作をシミュレートできます。
ComponentDidUpdate : 関数コンポーネントにはcomponentDidUpdateメソッドはありませんが、useEffectフックを使用してcomponentDidUpdateの動作をシミュレートできます。
ComponentWillUnmount : 関数コンポーネントにはcomponentWillUnmountメソッドはありませんが、useEffectフックを使用してcomponentWillUnmountの動作をシミュレートできます。

クラスコンポーネントのライフサイクル:

ComponentDidMount : コンポーネントがマウントされた後に呼び出され、このメソッドで非同期操作を実行するか、外部ライブラリと対話します。
ComponentDidUpdate : コンポーネントの更新後に呼び出され、DOM 操作、ステータス同期、またはネットワークリクエストが実行されます。
ComponentWillUnmount : コンポーネントがアンマウントされる前に呼び出され、タイマーのクリア、サブスクリプションのキャンセル、キャッシュのクリアなどの操作が実行されます。

さらに、 shouldComponentUpdate、getSnapshotBeforeUpdate、componentDidCatch など、他のライフサイクルメソッドもいくつかあります。これらのメソッドは、関数コンポーネントとクラスコンポーネントの両方で同じです。

9. 管理されたコンポーネントと管理されていないコンポーネントの違いは何ですか?

React では、制御されたコンポーネントと制御されていないコンポーネントは、コンポーネントを処理する 2 つの異なる方法です。

制御対象コンポーネントは、コンポーネントの状態を通じてユーザー入力を制御するコンポーネントです。これは、コンポーネントの状態がユーザーの入力と同期され、コンポーネントの状態を設定することでコンポーネントの動作を制御できることを意味します。たとえば、<input>要素はvalueコンポーネントの状態を通じて制御でき、その要素に対する変更はコンポーネントの状態を変更することによって行う必要があります。制御されたコンポーネントの利点は、コンポーネントのステータスとユーザー入力が制御可能であり、管理が容易であることです。

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.setState({
      inputText: event.target.value
    });
  }

  render() {
    return (
      <input type="text" value={this.state.inputText} onChange={this.handleInputChange} />
    );
  }
}

制御されていないコンポーネントを使用すると、ユーザーは入力によって DOM を自由に更新できます。制御されていないコンポーネントを使用すると、状態値を使用せずに DOM から要素の値を直接取得できます。通常、ref要素の値を取得するために使用します。制御されたコンポーネントと比較して、制御されていないコンポーネントの利点は、通常、よりシンプルで直感的であることです。

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    console.log(this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

10.React.createElementとは何ですか?

React.createElement は、仮想 DOM 要素を作成するために使用される React の API です。これは、タグ名または React コンポーネント、属性を含むオブジェクト、およびオプションの子要素の 3 つのパラメーターを受け取り、仮想 DOM 要素を表す JavaScript オブジェクトを返します。仮想 DOM 要素を使用して、React コンポーネントツリーを構築できます。たとえば、次のコードは h1 要素を作成します。

React.createElement("h1", { className: "title" }, "Hello, world!")

または、JSX 構文を使用します。

<h1 className="title">Hello, world!</h1>

11. JSX とは何ですか?

JSX は、HTML および XML タグを JavaScript コードに直接記述できるようにする JavaScript 構文拡張機能であり、カスタムコンポーネントの定義にも使用できます。これは主に、React で UI コードを記述するプロセスを簡素化することを目的としているようです。

JSX では、HTML タグと XML タグを React 要素として扱うことができるため、React が提供する API とプロパティを使用して操作およびレンダリングできます。JSX の構文を使用すると、UI コンポーネントの構造と動作をより直感的に記述することができます。

JSX コードの例:

import React from 'react';

const element = <h1>Hello, World!</h1>;

function App() {
    return (
        <div>
            {element}
            <p>This is a JSX example.</p>
        </div>
    );
}

上記のコードでは、JSX がコード内に HTML タグを直接書き込む方法がわかります。同時に、JSX が JavaScript と混合されているため、JSX で JavaScript 変数を使用し、それらを UI コンポーネントとしてレンダリングできることもわかります。

JSX を使用するには、Babel などのツールを使用して通常の JavaScript コードにコンパイルする必要があることに注意してください。

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

を更新するには、を使用する、を使用する、を使用するなど、stateさまざまな方法があります。その中でも、React が公式に提供する更新されたメソッドであり、非常に便利で実用的な場合もありますが、シナリオによっては問題が発生する可能性があります。setStateuseReducerReduxsetStatestate

よくある質問には次のようなものがあります。

setState非同期なので、更新後に最新のものを取得したい場合は、stateコールバック関数などを使用する必要がある場合がありますuseEffect。
大規模なデータ更新の場合、連続して複数回呼び出すとsetStateパフォーマンスの問題が発生する可能性があります
複雑なコンポーネント状態ロジックの場合、使用するとsetStateコードの保守と理解が困難になる可能性があります。

したがって、この方法をstate盲目的に使用することを選択するのではなく、特定のシナリオとニーズに応じて、を更新する適切な方法を選択する必要があります。setState

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

React Hook を使用する利点は次のとおりです。

より簡潔: フックは、コンポーネントの状態とライフサイクル機能を管理するためのより簡潔な方法を提供します。これにより、クラスコンポーネントと this キーワードの使用を回避できるため、コードがより明確で読みやすくなります。
柔軟性の向上: フックを使用すると、さまざまなコンポーネントで共有および再利用できるため、状態とライフサイクルをより柔軟に処理できます。これは、非常に複雑なコンポーネントやアプリケーションをより簡単に構築できることを意味します。
よりテストしやすく: フックを使用すると、テスト可能なコンポーネントを簡単に作成できます。コンポーネントの外部でテストコードを記述し、フックを使用してテストデータを挿入し、ライフサイクル関数をシミュレートできます。
最適化の向上: フックを使用すると、状態の更新をよりきめ細かく制御できるため、アプリケーションをより最適化できます。これにより、不必要な再レンダリングが削減され、アプリケーションのパフォーマンスが向上します。

要約すると、React Hooks を使用すると、複雑なコンポーネントやアプリケーションをより簡単に構築でき、コードの可読性、再利用性、テスト容易性、パフォーマンスが向上します。

14.React の useState() とは何ですか?

useState() は React のフック関数であり、関数コンポーネントで状態管理を実装するために使用されます。その機能は、関数コンポーネントに状態を追加し、状態が変化したときにコンポーネントの再レンダリングをトリガーすることです。useState() は、現在の状態の値と状態の更新に使用される関数の 2 つの要素を含む配列を返します。useState() を使用すると、開発者はコンポーネントの状態をより簡単に管理でき、コンポーネント内でクラスコンポーネントのライフサイクル関数を使用するなどの面倒な操作を回避できます。

15. ReactJS で Props に検証を適用するにはどうすればよいですか?

ReactJS では、PropTypes ライブラリを使用してコンポーネントの Props を検証できます。PropTypes ライブラリは、開発者がコンポーネント定義で必要な Prop タイプを指定できるようにする組み込みライブラリであり、Prop が定義されたタイプと一致しない場合に警告します。PropTypes ライブラリは、文字列、数値、配列、オブジェクトなどのさまざまな Prop タイプを提供するため、Prop を簡単に検証できます。

以下は、PropTypes ライブラリを使用して Props を検証するコンポーネントの例です。

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

上記の例では、MyComponent コンポーネントは 2 つの Props、name と age を受け入れます。コンポーネント定義で PropTypes ライブラリを使用すると、これらの Props のタイプを指定し、isRequired 属性を通じてそれらが必須であることを指定できます。PropTypes.string は名前のタイプを文字列として指定し、PropTypes.number は年齢のタイプを数値として指定します。

age などの文字列値など、無効な Props が MyComponent コンポーネントに渡された場合、PropTypes ライブラリは、開発者が問題をデバッグできるように警告メッセージをコンソールに出力します。

16. setState が呼び出されたとき、React レンダリングはどのように動作しますか?

が呼び出されるとsetState、React は内部でコンポーネントの状態を更新し、コンポーネントの再レンダリングをスケジュールします。このとき、React は新しい状態と古い状態を比較し、更新する必要がある部分を判断し、メソッドをrender再度呼び出してコンポーネントを再レンダリングします。最後に、React は更新されたコンテンツをブラウザーにレンダリングします。プロセス全体が自動化されており、手動介入は必要ありません。

17.React の setState の 2 番目のパラメータの役割は何ですか?

React において、setState()コンポーネントの状態を更新するために使用されるメソッド。setState()2 番目のパラメーターは、完了してコンポーネントが更新された後に呼び出されるオプションのコールバック関数です。

具体的には、2 番目のパラメーターの役割は、setState()コンポーネントの状態を更新した後、最新の DOM ノードの取得やその他の副作用操作の実行など、DOM の更新後に追加の操作を確実に実行できるようにすることです。非同期であるためsetState()、コンポーネントの状態はすぐには更新されませんが、後続の調整フェーズとコミットフェーズで更新されます。したがって、コールバック関数を使用すると、更新直後に実行する必要があるアクションが、コンポーネントの状態が更新された後に確実に実行されます。

サンプルコードは次のとおりです。

this.setState(
  { count: this.state.count + 1 },
  () => console.log('count updated: ', this.state.count)
);

上記のコードでは、2 番目のパラメーターはコールバック関数で、setState()完了後に更新されたカウント値を出力します。

18.React の render() の目的を説明します。

React では、 render() メソッドの主な目的は、コンポーネントを仮想 DOM にレンダリングし、DOM に挿入することです。React では、コンポーネントの状態が変化するたびに、 render() メソッドが呼び出され、コンポーネントが再レンダリングされます。これは、React が DOM を直接操作するのではなく、効率的な DOM 操作のために Virtual DOM を使用するためです。そのため、コンポーネントの状態が変化するたびに、React は仮想 DOM を再計算し、以前に生成された仮想 DOM を比較して必要な最小限の変更を見つけ、最終的に変更が必要な部分のみを更新します。このアプローチにより、効率的な DOM 操作が可能になり、アプリケーションのパフォーマンスが向上します。

19.React におけるステートプロモーションとは何ですか?

React の状態改善は、ユーザーが子コンポーネントを操作したときに行われます。子コンポーネントは、それ自身の状態を変更しません。この操作によって変更されたデータを、独自の props を通じて親コンポーネントに渡し、親コンポーネントの状態を変更します。親コンポーネントによって制御されるすべての子コンポーネントを変更します。状態は React の単一データフローの特性によっても決定されます。

20.強制リフレッシュに反応する

React のforceUpdate() メソッドを使用して、コンポーネントを強制的に更新できます。このメソッドにより、コンポーネントの render() メソッドが再度呼び出され、コンポーネントが再レンダリングされます。

たとえば、コンポーネントにボタンを追加し、このボタンをクリックしてコンポーネントを強制的に更新したい場合は、次のように実行できます。

import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>强制刷新</button>
        {/* ... */}
      </div>
    );
  }
}

この例では、ユーザーがボタンをクリックすると、コンポーネントが強制的に更新されるhandleClickメソッドが呼び出されます。forceUpdate()

21. ルーティングモードとは何ですか? リダイレクトルーティング

React ルーティングは、React アプリケーションで使用されるクライアント側のルーティングパターンです。これにより、開発者はアプリケーション内でユーザーをアプリケーション内のさまざまなセクションやページに誘導できるさまざまなルートを定義できます。

React ルーティングにはhashとの 2 つのモードがありますhistory。

ハッシュモードでは、ルーティング情報は URL の#シンボルの直後のハッシュ部分に格納されます。たとえば、http://example.com/#/page1。このモデルの利点は、ブラウザが URL を受信した後にサーバーにリクエストを送信せず、ルーティングの変更をクライアント上で直接処理することです。欠点は、URL が少し奇妙に見えるため、SEO にも影響する可能性があることです。

履歴モードでは、ルーティング情報は URL のパス部分に保存されます (例: ) http://example.com/page1。このモードの利点は、URL の見た目が良くなり、従来の URL 構造によりよく準拠することです。欠点は、ルーティング情報を正しく処理するために開発サーバーでの構成が必要なことです。ユーザーがアプリケーションのさまざまな部分にアクセスすると、ブラウザーはサーバーにリクエストを送信します。

リダイレクトルーティングは、開発者がユーザーをある URL から別の URL にリダイレクトできるようにする React アプリケーションで使用されるルーティング手法です。これは、ユーザーが認証を必要とするページにアクセスしようとしているがまだログインしていない場合など、多くの状況でユーザーをログインページにリダイレクトするのに役立ちます。React Router は、Redirectリダイレクトルーティングを実装するためのコンポーネントを提供します。

22. ルートの遅延読み込みを実装する方法

React でルートの遅延読み込みを実装する手順は次のとおりです。

React.lazy()このメソッドを使用して、コード分割と遅延読み込みを実装します。このメソッドは、コンポーネントを返す Promise オブジェクトを受け取ります。
React.lazy()で遅延ロードされるコンポーネントを導入します。例えば：
```
const AsyncComponent = React.lazy(() => import('./AsyncComponent'));
```

ルーティングコンポーネントでReact.lazy()とを使用してSuspense、遅延ロードされるコンポーネントをラップします。例えば：

import React, { lazy, Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </div>
  );
}

Suspenseコンポーネントの属性を使用して、fallbackコンポーネントのロード中に表示されるコンポーネントまたは要素を指定します。この例では、単純な「読み込み中...」テキストを指定します。

このようにして、ユーザーが遅延ロードされたルートにアクセスすると、React はコンポーネントを非同期的にロードし、必要に応じてロードビューを表示します。

23. 先渡し価値の移転方法

React における前方値の転送は、通常、親コンポーネントから子コンポーネントへのデータの転送を指します。転送値転送を実装する方法は次のとおりです。

データは props を介して親コンポーネントのプロパティとして子コンポーネントに渡され、子コンポーネントの this.props を通じてデータを取得できます。
コンテキスト API を使用して、親コンポーネントで Context オブジェクトを作成し、Provider コンポーネントを通じて子コンポーネントにデータを渡します。データは、子コンポーネントの Consumer コンポーネントを通じて取得できます。
コールバック関数を使用するには、親コンポーネントでコールバック関数を定義し、それをプロパティとして子コンポーネントに渡し、子コンポーネントでコールバック関数を呼び出してデータを親コンポーネントに渡します。
Redux などの状態管理ツールを使用してアプリケーションの状態をグローバルストアに保存すると、各コンポーネントはディスパッチやサブスクライブなどのメソッドを通じてアプリケーションの状態にアクセスし、変更できます。

24. 逆価値転送方法

Reactではpropsを介して親コンポーネントから子コンポーネントに値を渡すことができますが、子コンポーネントから親コンポーネントに値を渡すには、いくつかの逆値転送メソッドを使用する必要があります。

値を逆方向に渡す一般的な方法は、コールバック関数を使用することです。親コンポーネントでコールバック関数を定義し、この関数を props として子コンポーネントに渡します。子コンポーネントが親コンポーネントに値を渡す必要がある場合、このコールバック関数を呼び出し、パラメータとして渡される値を親コンポーネントに渡します。

コード例:

親コンポーネント:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleMessage = (text) => {
    setMessage(text)
  }

  return (
    <div>
      <p>{message}</p>
      <ChildComponent sendMessage={handleMessage} />
    </div>
  )
}

export default ParentComponent;

サブアセンブリ:

import React, { useState } from 'react';

function ChildComponent({ sendMessage }) {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  }

  const handleSend = () => {
    sendMessage(text);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleSend}>Send</button>
    </div>
  )
}

export default ChildComponent;

この例では、親コンポーネントは状態messageとコールバック関数を定義しますhandleMessage。コールバック関数は props として子コンポーネントに渡されます。子コンポーネントは、 state text、入力ボックス、およびボタンを定義します。入力ボックスの値が変更されると、textステータスが更新されます。ボタンをクリックすると、親コンポーネントによって渡されたコールバック関数が呼び出されsendMessage、textパラメータとして渡されます。

このように、子コンポーネントにテキストを入力してボタンをクリックすると、テキスト値が親コンポーネントに渡され、親コンポーネントは渡されたテキスト値を状態に更新し、ページ上にテキスト値を表示しますmessage。。

25. 同国価値移転方法

React では、兄弟コンポーネント間の値は、共通の親コンポーネントを介して渡される必要があります。一般的な方法は、共有状態 (親コンポーネントの状態など) を共通の親コンポーネントにプロモートし、これらの状態がそれらのコンポーネントに渡されることです。小道具として。

もう 1 つの一般的な方法は、React の Context API を使用することです。Context は、props を介して明示的に値を渡すことなく、コンポーネント間で値を共有する方法を提供します。

コード例:

import React, { createContext, useContext, useState } from 'react';

// 创建一个Context对象
const MyContext = createContext();

function ParentComponent() {
  const [message, setMessage] = useState('');

  return (
    // 将状态通过Provider传递给子组件
    <MyContext.Provider value={
   
   { message, setMessage }}>
      <ChildComponent1 />
      <ChildComponent2 />
    </MyContext.Provider>
  )
}

function ChildComponent1() {
  // 使用 useContext 获取 Provider 的值
  const { message } = useContext(MyContext);
  
  return (
    <div>
      <h2>ChildComponent1</h2>
      <p>{message}</p>
    </div>
  )
}

function ChildComponent2() {
  // 使用 useContext 获取 Provider 的 setValue
  const { setMessage } = useContext(MyContext);
  const handleClick = () => {
    setMessage('Hello, ChildComponent1!');
  }

  return (
    <div>
      <h2>ChildComponent2</h2>
      <button onClick={handleClick}>Send Message</button>
    </div>
  )
}

export default ParentComponent;

この例では、親コンポーネントにContextオブジェクトを作成し、共有が必要な状態messageとその状態を更新する関数をsetMessage値として子コンポーネントに渡します。サブコンポーネントでは、useContext フックを通じてこの値オブジェクトを取得し、そのプロパティとメソッドを使用します。

値はChildComponent1 で直接取得しmessage、コンポーネントでレンダリングできます。setMessageChildComponent2 では、メソッドを呼び出すことで値を更新できますmessage。

Context を使用する場合は、アクセスする必要があるすべてのサブコンポーネントが Provider コンポーネントに含まれていることを確認する必要があることに注意してください。そうしないと、サブコンポーネントが正しい Context 値を取得できない可能性があります。

26. コンポーネント間の値の転送方法

React のコンポーネント間で値を渡す方法はいくつかあります。

React の Context API の使用: プロパティをレイヤーごとに明示的に渡すことなく、コンポーネント間で値を共有する方法を提供します。前の回答を参照してください。
Redux を使用する: グローバルストアを作成してアプリケーションの状態を管理し、ディスパッチアクションを通じて状態と通知コンポーネントを更新します。Redux は、ストアをコンポーネントツリーに挿入できるプロバイダーコンポーネントを提供し、すべてのコンポーネントがアクセスできるようにします。詳細はRedux公式サイトをご覧ください。
Event Bus の使用:これを実現するには、 React EventBus、EventEmitter3などのサードパーティライブラリを使用できます。コンポーネント間の値の転送は、イベントをバインドし、イベントバス上でイベントをトリガーすることによって実現されます。
React Router を使用する: URL 経由でパラメータを渡し、コンポーネント間で値を渡します。パラメータはクエリ文字列、ハッシュなどを使用して渡すことができます。パラメーターを受け取るコンポーネントの props.location を通じてパラメーターを取得します。詳細はReact Router公式サイトをご覧ください。

実際の状況に基づいて、コンポーネント間で値を渡すための適切な方法を選択する必要があります。親コンポーネントと子コンポーネント間の単純な値の転送であれば、比較的単純であり、props を使用して直接渡すことができます。コンポーネント間の関係が複雑な場合、または共有する必要がある状態が多数ある場合は、Redux または Context を使用してアプリケーションの状態を管理することを検討できます。少量のデータだけを渡す必要がある場合は、イベントバスまたは React Router の使用を検討してください。

27.「単一のデータソース」とは何を意味しますか?

「単一のデータソース」とは、システム内にデータストレージが 1 つだけある状況を指します。データソースは統一され、一意で、標準化されています。さまざまなビジネスモジュールまたはコンポーネントがこのデータソースにアクセスして、データの読み取りと書き込みを行います。このアーキテクチャにより、データの一貫性と正確性が保証されると同時に、データのセキュリティと保守性が向上し、重複ストレージとデータの不整合が回避されます。単一のデータソースにより、システムの複雑さとメンテナンスコストが軽減され、システムの拡張とアップグレードが容易になります。

React アプリケーションでは、「単一データソース」とは通常、トップレベルコンポーネント (アプリコンポーネントなど) の状態に均一に保存されているアプリケーションの状態を指しますが、他のコンポーネントは props を通じてデータを取得および変更します。このトップレベルのコンポーネントは、アプリケーションの「唯一の信頼できる情報源」として機能し、すべての状態が同じ場所で管理され、冗長で一貫性のない状態が回避されます。

React は、コンポーネントの状態をその親コンポーネントにプロモートする「ステートプロモーション」と呼ばれる手法を提供します。このようにして、子コンポーネントの状態が親コンポーネントの状態となり、コンポーネント間での状態の共有と管理が実現される。このようにして、React は「単一データソース」アーキテクチャを簡単に実装し、アプリケーションステータスの一貫性と保守性を確保できます。

Redux は、JavaScript アプリケーション用の状態管理ライブラリです。これは、「単一データソース」として知られるアーキテクチャパターンに従います。これは、アプリケーションの状態全体が、多くの場合「ストア」と呼ばれる単一の JavaScript オブジェクトに保持されることを意味します。

Redux では、アプリケーションの状態は不変とみなされ、直接変更することはできません。代わりに、一部の変更は、変更を説明するデータを含むプレーンな JavaScript オブジェクトである「アクション」を通じてのみ説明できます。

アクションがストアにディスパッチされる (または「ディスパッチされる」) と、ストアはアクションに基づいて状態を更新します。この「一方向データフロー」モデルにより、状態変更の管理がより予測可能かつ制御可能になり、状態変更の追跡の難しさや状態の不一致など、一般的な状態管理の問題が回避されます。

したがって、「単一データソース」は Redux の中核概念の 1 つであり、アプリケーション全体の状態を 1 つの JavaScript オブジェクトに保存できるため、管理とメンテナンスが容易になります。さらに、Redux は、開発者がアプリケーションのステータスをより適切に管理できるように、一般的に使用されるいくつかのツールとルール (「純粋関数」、「ミドルウェア」など) も提供します。

28. イベントを変更する方法

React では、イベント処理関数の this は、コンポーネントインスタンス (または null) ではなく、デフォルトで未定義を指します。したがって、コンポーネントのインスタンスプロパティにアクセスする場合、またはイベントハンドラーでコンポーネントのメソッドを呼び出す場合は、これをコンポーネントインスタンスにバインドする必要があります。

これをイベント処理関数にバインドする方法は数多くありますが、一般的な方法のいくつかを次に示します。

1. コンストラクターで binding() メソッドを使用して、これをバインドします。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

2. アロー関数は自動的にコンテキストを継承するため、アロー関数を使用してイベント処理関数を定義します。

class MyComponent extends React.Component {
  handleClick = () => {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

3.使用Function.prototype.bind()方法：

class MyComponent extends React.Component {
  handleClick() {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click me</button>
    );
  }
}

どのメソッドを使用するかに関係なく、コンポーネントのプロパティとメソッドをイベントハンドラー関数で使用できるように、これをコンポーネントインスタンスにバインドする必要があります。

Redux はどのような問題を解決しますか? どのように機能するのでしょうか?

React フレームワークのような純粋なビューフレームワークには、コンポーネントの通信や状態の共有などに対する優れたソリューションがありません。問題を解決するには、状態のプロモーションやコンテキストなどの技術的なソリューションのみを使用できます。ただし、コンポーネントの構造とデータフローの方向がより複雑になると、複雑な、、React 独自の API では、このような問題を解決するのはやや困難です。

現時点では、Flux や Redux などのアーキテクチャ手法を使用して問題を解決できます。

以前のプロジェクトでは Redux を使用していましたが、その後 rtk が導入され、react コンポーネントで redux を使用することがより便利になりました。一部の小規模なプロジェクトや小規模なモジュールでは、useReducerHook を使用して状態を構築し、ディスパッチすることができます。問題を迅速かつエレガントに解決できます。

以前のネイティブ Redux では、実際のプロジェクト開発では、非同期のアクション処理に redux-thunk が必要になることが多く、コンポーネントをストアに接続するためにreact-reduxを使用していましたが、react-reduxを使用しないとさらに面倒になります。

redux の構造はストア、ビュー、アクション、リデューサーに分かれています。

ストアに格納されている状態は、ビューの getState を通じて取得することも、subscribe メソッドを通じて監視することもできます。ビューが UI 操作を生成するとき、アクションメソッドを呼び出してアクションを生成し、次にディスパッチメソッドが使用されます。このとき、Reducer が呼び出され、現在のステータスとアクションオブジェクトを受け取り、計算後に新しいステータスが返され、Store がステータスを更新します。

React-redux を使用した後、コンポーネントは、mapStateToProps パラメーターと mapDispatchToProps パラメーターを使用して接続することにより、ストア内の状態とアクション内のメソッドを取得できます。

RTK を使用した後は、リデューサーの作成がより簡単かつ便利になり、useSelector と useDispatch を使用してステータスにアクセスし、アクションをより迅速かつ効率的にディスパッチします。

たとえば、小規模なシナリオの場合、以前に作成した登録モジュールには 3 つのステップがあります。各ステップでは、最初のステップでユーザーが入力した携帯電話番号とその他の情報が必要です。これにより、いくつかの小さなコンポーネント間で状態共有が形成されます。親コンポーネントのステータスを改善するとデータフローが不明確になり、ストレージにredux-storeを使用することができないため、useReducerを使用して状態とディスパッチを内部で統合する小さなストアを手早く作成しました。問題も非常に効率的に解決できます。

redux はデータ変更をどのように通知しますか? 通知プロセスとは何ですか?

Redux のストアの状態は、getState メソッドを使用して取得する必要があります。コンポーネントの更新されたシーンの属性と状態の変更のみが、コンポーネントの再レンダリングを引き起こす可能性があります。したがって、通常の開発では、多くの場合、マウントする必要があります。ストア内の状態を対応するコンポーネント自身の状態に変更し、ストア内の状態が変化するまで待機し、同時にコンポーネント自体の状態を更新します。これにより、コンポーネントは最新のデータを再レンダリングします。

このとき、store,.subscribe メソッドを使用してストア内の状態の変化を監視する必要があり、ストア内の状態が変化すると、コンポーネントは自身の状態を更新します。

React-redux の connect を使用した後は、そのようなコードを記述する必要はありません。mapStateToProps に基づいて connect によって生成されたコンテナーコンポーネントはすでに状態の変化を監視しており、UI コンポーネントはプロパティの受信を待つだけでよいからです。

React におけるキーの役割

React コンポーネントが更新されると、React は新しい完全な仮想 DOM ツリーを生成して以前の仮想 DOM と比較し、更新されたノードに関連する位置を更新します。

多くの場合、比較の前に照合と比較が必要になりますが、より正確な照合を実現するために、React ではリストループやその他の位置の要素にキー属性を手動で追加し、比較中にキーを検索することで正確な照合を実行できるようにしたいと考えています。

以前プロジェクトに取り組んでいたときにこの状況に遭遇したことがあります。通常はデータの ID をキーとして使用します。一度問題が発生しました。バックエンドによって提供されるデータには ID のような主キーがなかったので、インデックスをキーとして使用すると、データリストの先頭に項目を追加するときに比較が失敗し、最終的にはバックエンドを見つけて、それを処理する一意の ID を追加する必要がありました。

フックを使用してプログラミングするときにライフサイクルをシミュレートするにはどうすればよいですか?

関数コンポーネントのライフサイクルをシミュレートするフックの主な用途は useEffect です。

useEffect の依存関係配列が空の配列の場合、この時点でcomponentDidMount がシミュレートされます。

useEffect の依存関係配列が空でない場合、この時点でcomponentDidUpdate がシミュレートされます。

useEffectのコールバック関数が関数を返す場合、このとき返される関数はcomponentWillUnmountをシミュレートします。