Q1. Wenn Sie nur das Component aus der React-Bibliothek importieren möchten, welche Syntax verwenden Sie?

• import React.Component from 'react'
• import [ Component ] from 'react'
• import Component from 'react'
• import { Component } from 'react'

Q2. Wenn ein Funktionskomponente bei denselben Props immer auf dieselbe Weise gerendert werden soll, welche einfache Leistungsoptimierung steht dafür zur Verfügung?

• Wickeln Sie es in die Higher-Order-Komponente React.memo ein.
• Implementieren Sie den Hook useReducer.
• Implementieren Sie den Hook useMemo.
• Implementieren Sie die Lebenszyklusmethode shouldComponentUpdate.

Q3. Wie beheben Sie den Syntaxfehler, der durch Ausführen dieses Codes entsteht?

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

• Setzen Sie das Objekt in Klammern.
• Rufen Sie die Funktion aus einer anderen Datei auf.
• Fügen Sie eine Rückgabeanweisung vor die erste geschweifte Klammer ein.
• Ersetzen Sie das Objekt durch ein Array.

Q4. Wenn Sie den folgenden Import in einer Datei sehen, was wird für die Zustandsverwaltung im Komponente verwendet?

import React, {useState} from 'react';

• React Hooks
• zustandsbehaftete Komponenten
• Mathematik
• Klassenkomponenten

Q5. Mit Objektliteral-Verbesserung können Sie Werte wieder in ein Objekt einfügen. Wenn Sie person in der Konsole protokollieren, was ist die Ausgabe?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

• {{name: "Rachel", age: 31}}
• {name: "Rachel", age: 31}
• {person: "Rachel", person: 31}}
• {person: {name: "Rachel", age: 31}}

Q6. Mit welcher Testbibliothek ist React am häufigsten verbunden?

• Mocha
• Chai
• Sinon
• Jest

Referenz

Q7. Um das erste Element aus dem Array ("cooking") mithilfe der Array-Destrukturierung zu erhalten, wie passen Sie diese Zeile an?

const topics = ['cooking', 'art', 'history'];

• const first = ["cooking", "art", "history"]
• const [] = ["cooking", "art", "history"]
• const [, first]["cooking", "art", "history"]
• const [first] = ["cooking", "art", "history"]

Q8. Wie verarbeiten Sie das Weitergeben durch den Komponentenbaum, ohne Propss auf jeder Ebene manuell weiterzugeben?

• React Send
• React Pinpoint
• React Router
• React Context

Referenz

Q9. Was sollte die Konsole anzeigen, wenn der folgende Code ausgeführt wird?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

• Horse
• Cat
• Mouse
• undefined

Q10. Wie heißt das Tool, das JSX nimmt und in createElement-Aufrufe umwandelt?

• JSX Editor
• ReactDOM
• Browser Buddy
• Babel

Q11. Warum könnte man useReducer in einer React-Komponente anstelle von useState verwenden?

• Wenn Sie Redux ersetzen möchten
• Wenn Sie einen komplexeren Zustand in einer App verwalten müssen
• Wenn Sie die Leistung verbessern möchten
• Wenn Sie Ihre Produktions-App zerstören möchten

Q12. Welche Props aus dem props-Objekt stehen der Komponente mit der folgenden Syntax zur Verfügung?

<Message {...props} />

• alle, die sich nicht geändert haben
• alle
• Kind-Props
• alle, die sich geändert haben

Q13. Betrachten Sie den folgenden Code von React Router. Wie nennt man :id in der path-Eigenschaft?

<Route path="/:id" />

• Dies ist ein Routenmodal.
• Dies ist ein Routenparameter.
• Dies ist ein Routenteiler.
• Dies ist ein Routenlink.

Q14. Wenn Sie eine Komponente namens Dish erstellen und sie im DOM rendern, welcher Elementtyp würde gerendert werden?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

• div
• Abschnitt
• Komponente
• h1

Q15. Wie sieht dieses React-Element anhand des folgenden Codes aus?

React.createElement('h1', null, "What's happening?");

• <h1 props={null}>What's happening?</h1>
• <h1>What's happening?</h1>
• <h1 id="component">What's happening?</h1>
• <h1 id="element">What's happening?</h1>

Referenz

Q16. Welche Eigenschaft müssen Sie dem Suspense-Komponente hinzufügen, um einen Spinner oder einen Ladezustand anzuzeigen?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

• faul
• laden
• fallback
• Spinner

Referenz

Q17. Wie würden Sie die in geschweifte Klammern eingeschlossene message-Variable unten beschreiben?

const message = 'Hallo';
const element = <p>{message}</p>;

eine JS-Funktion

• ein JS-Element
• ein JS-Ausdruck
• ein JSX-Wrapper

Q18. Was können Sie verwenden, um Code-Splitting zu handhaben?

• React.memo
• React.split
• React.lazy
• React.fallback

Referenz

Q19. Wann verwenden Sie useLayoutEffect?

• um für alle Geräte zu optimieren
• um die Aktualisierung abzuschließen
• um das Layout des Bildschirms zu ändern
• wenn Sie möchten, dass der Browser malt, bevor der Effekt ausgeführt wird

[Quelle] (https://react.dev/reference/react/useLayoutEffect) "useLayoutEffect is a version of useEffect that fires before the browser repaints the screen."

[Erklärung]Die richtige Antwort auf die Frage "Wann verwenden Sie useLayoutEffect?" lautet:

Wenn Sie das Layout des Bildschirms ändern müssen.

useLayoutEffect wird verwendet, wenn Sie DOM-Änderungen durchführen müssen, die auf dem aktualisierten Layout der Elemente beruhen. Es ermöglicht Ihnen, Änderungen am DOM synchron vor dem Malen des Browsers durchzuführen. Dies kann nützlich sein, wenn Sie das Layout messen oder manipulieren müssen, z. B. auf Elementabmessungen oder -positionen zugreifen, Bildlaufversätze berechnen oder andere Operationen durchführen, die aktuelle Layoutinformationen erfordern.

Die andere bereitgestellte Option ist nicht korrekt:

"Wenn Sie möchten, dass der Browser malt, bevor der Effekt ausgeführt wird" ist nicht korrekt. Der Zweck von useLayoutEffect besteht darin, den Effekt synchron nach dem DOM-Update, aber vor dem Bemalen des Browsers auszuführen, sodass Sie layoutbezogene Änderungen vornehmen können, bevor die visuelle Renderung erfolgt.

Erklärung: useLayoutEffect wird vor dem useEffect Hook ausgeführt, ohne sich sehr um die DOM-Manipulation zu kümmern. Obwohl das React-Hook useLayoutEffect nach dem useEffect Hook festgelegt ist, wird es zuerst ausgelöst!

Q20. Was ist der Unterschied zwischen den Klickverhalten dieser beiden Buttons (unter der Annahme, dass this.handleClick korrekt gebunden ist)?

A. <button onClick={this.handleClick}>Klick mich</button>
B. <button onClick={event => this.handleClick(event)}>Klick mich</button>

• Button A hat beim Klicken auf den Button keinen Zugriff auf das Ereignisobjekt.
• Button B löst den Handler this.handleClick nicht erfolgreich aus.
• Button A löst den Handler this.handleClick nicht erfolgreich aus.
• Es gibt keinen Unterschied.