Vorbereitung auf React-Interviews

1. Was ist der Unterschied zwischen useState und useRef?

Antworten:-

• useState wird verwendet, um eine Zustandsvariable in einer Funktionskomponente zu deklarieren. Wenn sich der Status ändert, wird die Komponente neu gerendert.

• useRef hingegen gibt ein veränderbares Ref-Objekt zurück, dessen Eigenschaft .current mit dem übergebenen Argument (initialValue) initialisiert wird.

• Das zurückgegebene Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen.

• Ein häufiger Anwendungsfall für useRef ist der zwingende Zugriff auf die Eigenschaften einer untergeordneten Komponente. Es ist wichtig zu beachten, dass Änderungen an der .current-Eigenschaft einer Referenz nicht dazu führen, dass die Komponente erneut gerendert wird.

2. Was sind Portale in React?

• Angenommen, in einigen Szenarien müssen wir eine Komponente außerhalb des Root-DOM-Knotens rendern. Hier können wir Portal verwenden.

• Wir können es für Modal-/einige Popup-Komponenten verwenden.

3. Warum brauchen wir eine Super-Unterrichtskomponente?

Antworten:-

• Ein untergeordneter Klassenkonstruktor kann diese Referenz erst verwenden, wenn super() aufgerufen wurde.

• Wenn Sie super() nicht aufrufen, gibt JavaScript einen Fehler aus, da dies nicht initialisiert ist. Dies liegt daran, dass dies im Kontext der untergeordneten Klasse nicht initialisiert wird, bis super() aufgerufen wurde.
  

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

Antworten:-

• useCallback ist ein Hook, der eine gespeicherte Version einer Callback-Funktion zurückgibt, die sich nur ändert, wenn sich eine der Abhängigkeiten geändert hat.
• Es ist nützlich, wenn Rückrufe an optimierte untergeordnete Komponenten übergeben werden, die auf Referenzgleichheit basieren, um unnötige Renderings zu verhindern.

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 ist ein Hook, der einen gespeicherten Wert zurückgibt, der nur dann neu berechnet wird, wenn sich eine der Abhängigkeiten geändert hat. Es ist nützlich für teure Berechnungen.

 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 ist eine Komponente höherer Ordnung, die sich das Ergebnis einer Funktionskomponente merkt und es nur rendert, wenn sich die Requisiten ändern.
• Es ist nützlich, unnötiges Rendern für Komponenten zu verhindern, die mit denselben Requisiten das gleiche Ergebnis rendern.

import React from 'react';

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

export default MyComponent;

HINWEIS:-
useCallback wird zum Merken von Funktionen verwendet, useMemo wird zum Merken von Werten verwendet und React.memo wird zum Merken von Komponenten verwendet.

5. Was passiert, wenn wir Memo, Memo und Callback über die oben genannten Funktionen hinaus verwenden?

Speichernutzung:

• Eine übermäßige Verwendung von React.memo kann die Speichernutzung Ihrer Anwendung erhöhen, da die vorherige Version einer Komponente im Speicher gespeichert wird.

Leistungsprobleme:

• Obwohl diese Hooks und React.memo dazu gedacht sind, die Leistung zu optimieren, kann ihre übermäßige Verwendung tatsächlich den gegenteiligen Effekt haben.

• UseMemo und useCallback haben beispielsweise Kosten, und wenn die Berechnung, die sie verhindern, nicht teurer ist als die Kosten für die Verwendung des Hooks, kann es zu einer langsameren Leistung kommen.

6. Was ist der Unterschied zwischen React Component und React Element?

Antworten:-

Reaktionskomponente:

• Eine React-Komponente ist eine Funktion oder Klasse, die optional Eingaben akzeptiert und ein React-Element zurückgibt. Komponenten können wiederverwendet werden und auch einen privaten Zustand beibehalten

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

Reaktionselement:

• Ein React-Element ist ein einfaches Objekt, das beschreibt, was in Bezug auf die DOM-Knoten oder andere Komponenten auf dem Bildschirm angezeigt werden soll. Elemente können andere Elemente in ihren Requisiten enthalten.
• Das Erstellen eines React-Elements ist kostengünstig. Sobald ein Element erstellt wurde, wird es niemals verändert.

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

7. Kernprinzip von Redux?

Antworten:-

• Eine einzige Quelle der Wahrheit
• Der Status ist schreibgeschützt (nie direkt aktualisieren)
• Änderungen werden in Pure Functions (Reducer) vorgenommen
• Funktioniert nur für serialisierbare Objekte.

8. Differenzalgorithmus, Abstimmung und Reaktionsfaser?

Antworten:- Separater Artikel zum selben Thema
Ein tiefer Einblick in die Optimierungsalgorithmen und -prozesse von React

9. Was sind synthetische Ereignisse in Reaktion?

Antworten: – Ereignisse, die wir sicherstellen, sollten in verschiedenen Browsern konsistent sein.

Beispiel:- präventDefault(), stopPropagation()

10. Staat anheben?

Antworten: – Wenn mehrere Komponenten dieselben sich ändernden Daten gemeinsam nutzen müssen, wird empfohlen, den gemeinsamen Status auf ihren nächsten gemeinsamen Vorfahren anzuheben.

Das obige ist der detaillierte Inhalt vonVorbereitung auf React-Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!