React 面接の準備

1. useState と useRef の違いは何ですか?

答え:-

• useState は、機能コンポーネント内の状態変数を宣言するために使用されます。状態が変化すると、コンポーネントは再レンダリングされます。

一方、

• useRef は、渡された引数 (initialValue) で初期化される .current プロパティを持つ可変 ref オブジェクトを返します。

返されたオブジェクトは、コンポーネントの存続期間全体にわたって持続します。
useRef の一般的な使用例は、子コンポーネントのプロパティに命令的にアクセスすることです。 ref の
• .current

  プロパティを変更しても、コンポーネントが再レンダリングされるわけではないことに注意することが重要です。

2. React のポータルとは何ですか?

いくつかのシナリオでは、ルート DOM ノードの外側でコンポーネントをレンダリングする必要があるとします。ここではポータルを使用できます。
モーダル/一部のポップアップコンポーネントに使用できます。

3.スーパーインクラスコンポーネントが必要な理由?

答え:-

子クラスのコンストラクターは、
• super()

  が呼び出されるまで、this 参照を利用できません。

super() を呼び出さない場合、初期化されていないため、JavaScript は
• エラーをスローします

  。これは、子クラスのコンテキストでの this は、 super() が呼び出されるまで初期化されないためです。
  

class Parent {
  constructor() {
    this.name = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super(); // Must call super() here
    this.name = 'Child';
  }
}

4. useCallback vs useMemo vs React.memo

答え:-

useCallback
• は、依存関係の 1 つが変更された場合にのみ変更されるコールバック関数のメモ化されたバージョンを返すフックです。 これは、不必要なレンダリングを防ぐために参照の等価性に依存する最適化された子コンポーネントにコールバックを渡すときに便利です。

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{increment}">
        Click me
      </button>
    </div>
  );
}

useMemo
• は、依存関係の 1 つが変更された場合にのみ再計算される、メモ化された値を返すフックです。コストのかかる計算に役立ちます。

 import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(count);
  }, [count]);

  return (
    <div>
      <p>Expensive value: {expensiveValue}</p>
      <button onclick="{()"> setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React.memo
• は、関数コンポーネントの結果をメモ化し、プロパティが変更された場合にのみそれをレンダリングする高次コンポーネントです。 同じプロパティを与えられて同じ結果をレンダリングするコンポーネントの不必要なレンダリングを防ぐのに役立ちます。

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // render logic here
});

export default MyComponent;

注:-

useCallback は関数のメモ化に使用され、useMemo は値のメモ化に使用され、React.memo はコンポーネントのメモ化に使用されます。

5.上記の useMemo、Memo、useCallback の機能を過剰に実行するとどうなりますか?

メモリ使用量:

React.memo を過剰に使用すると、コンポーネントの前のバージョンがメモリに保存されるため、アプリケーションのメモリ使用量が増加する可能性があります。

パフォーマンスの問題:

これらのフックと React.memo はパフォーマンスを最適化することを目的としていますが、使いすぎると実際には逆効果になる可能性があります。
たとえば、useMemo と useCallback にはコストがあり、それらが防止している計算がフックを使用するコストより高価でない場合、パフォーマンスが低下する可能性があります。

6.反応コンポーネントと反応要素の違いは何ですか?

答え:-

反応コンポーネント:

React コンポーネントは、オプションで入力を受け入れ、React 要素を返す関数またはクラスです。コンポーネントは再利用でき、プライベート状態も維持できます

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}</h1>;
}

反応要素:

React 要素は、DOM ノードまたは他のコンポーネントの観点から画面に表示したいものを記述するプレーンなオブジェクトです。要素には、props に他の要素を含めることができます。

• React 要素の作成は低コストです。要素が作成されると、変更されることはありません。

const element = <h1 id="Hello-world">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7. Redux の中核原則?

答え:-

唯一の真実の情報源

• 状態は読み取り専用です (直接更新しないでください)
• 純粋関数 (Reducer) で変更が行われます
• シリアル化可能なオブジェクトに対してのみ機能します。

8.アルゴリズム、調整、および React ファイバーを比較していますか?

回答:- 同じ内容については別の記事

React の最適化アルゴリズムとプロセスを詳しく解説します

9. React の合成イベントとは何ですか?

回答:- イベントは異なるブラウザ間でも一貫している必要があることを確認しています。

例:-PreventDefault()、stopPropagation()

10.ステータスを引き上げますか?

答え: - 複数のコンポーネントが同じ変化するデータを共有する必要がある場合、共有状態を最も近い共通の祖先まで引き上げることをお勧めします。

以上がReact 面接の準備の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。