React 面接の準備

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

答え:-

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

一方、

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

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

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

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

答え:-

子クラスのコンストラクターは、
• 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';
  }
}

答え:-

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 はコンポーネントのメモ化に使用されます。

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

答え:-

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

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

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

答え:-

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

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

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

例:-PreventDefault()、stopPropagation()

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

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