Grundlegende Kernkonzepte von React

In der sich schnell entwickelnden Welt der Webentwicklung bleibt React ein Eckpfeiler für die Erstellung dynamischer und leistungsstarker Benutzeroberflächen. Unabhängig davon, ob Sie ein erfahrener Entwickler sind oder gerade erst anfangen, ist es wichtig, die Kernkonzepte von React zu verstehen, um sein volles Potenzial auszuschöpfen. In diesem Artikel untersuchen wir die Grundprinzipien von React, vom Bibliotheksstatus bis zur Leistungsfähigkeit von Hooks, und bieten Ihnen eine klare Grundlage zur Verbesserung Ihrer React-Fähigkeiten. Lass uns eintauchen! ?

1. Ist React ein Framework oder eine Bibliothek?

React ist eine JavaScript-Bibliothek, kein Framework. Im Gegensatz zu Frameworks, die einen umfassenden Satz an Tools bereitstellen und eine bestimmte Art der Anwendungserstellung erzwingen, konzentriert sich React auf einen bestimmten Aspekt – das UI-Rendering. Das macht React äußerst flexibel und beliebt, da es der Unix-Philosophie folgt, eine Sache zu tun und sie gut zu machen.

2. Virtuelles DOM

Das DOM steht für Document Object Model und stellt in einfachen Worten die Benutzeroberfläche einer Anwendung dar. Jedes Mal, wenn wir die Benutzeroberfläche ändern, wird das DOM aktualisiert, um diese Änderung darzustellen. Das DOM wird als Baumdatenstruktur dargestellt. Wenn wir die Benutzeroberfläche ändern, wird das DOM seine untergeordneten Elemente neu rendern und aktualisieren. Das erneute Rendern der Benutzeroberfläche verlangsamt die Anwendung.

Für diese Lösung verwenden wir Virtual DOM. Das virtuelle DOM ist nur eine virtuelle Darstellung des DOM. Wenn sich der Status der Anwendung ändert, wird das virtuelle DOM anstelle des realen DOM aktualisiert.

Virtuelles DOM erstellt jedes Mal einen Baum und Elemente werden als Knoten dargestellt. Wenn sich eines der Elemente ändert, wird ein neuer virtueller DOM-Baum erstellt. Der neue Baum wird dann mit dem vorherigen Baum verglichen oder „verglichen“.

In diesem Bild stellen die roten Kreise die Knoten dar, die sich geändert haben. Diese Knoten stellen die UI-Elemente dar, die ihren Status ändern. Dann wurde der vorherige Baum mit dem aktuell geänderten Baum verglichen. Der aktualisierte Baum wird dann stapelweise auf das echte DOM aktualisiert. Dies macht React zu einer herausragenden leistungsstarken JavaScript-Bibliothek.

Zusammengefasst:

1. Das gesamte virtuelle DOM wird aktualisiert.
2. Das virtuelle DOM wird mit dem verglichen, wie es aussah, bevor Sie es aktualisiert haben. React findet heraus, welche Objekte sich geändert haben.
3. Die geänderten Objekte und nur die geänderten Objekte werden im echten DOM aktualisiert.
4. Änderungen am realen DOM führen zu einer Änderung des Bildschirms.

3. JSX

Mit JSX (JavaScript XML) können Sie HTML-ähnlichen Code in React schreiben. Es konvertiert HTML-Tags in React-Elemente mithilfe der Funktion React.createElement( Komponente, Requisiten, …Kinder).

Zum Beispiel:
JSX-Code:

<mytext color="red">
  Hello, Good Morning!
</mytext>

Dieses Beispiel wird kompiliert in:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Hinweis: Benutzerdefinierte Komponenten müssen mit einem Großbuchstaben beginnen. Kleingeschriebene Tags werden als HTML-Elemente behandelt.

4. Requisiten in JSX

Requisiten können in JSX auf verschiedene Arten angegeben werden:

JavaScript-Ausdrücke als Requisiten:

<sumcomponent sum="{1"></sumcomponent>

Hier ergibt props.sum 6.

String-Literale:

<textcomponent text="{‘Good" morning></textcomponent>

<textcomponent text="”Good" morning></textcomponent>

Beide Beispiele oben sind gleichwertig.

Requisiten sind standardmäßig auf „True“ eingestellt
Wenn wir für eine Requisite keinen Wert übergeben, wird dieser standardmäßig auf „true“ gesetzt.

Zum Beispiel

<textcomponent prop></textcomponent>

<textcomponent prop="{true}"></textcomponent>

Beide Beispiele oben sind gleichwertig.

5. Klassenkomponenten

Komponenten in React können als Klassen oder Funktionen definiert werden. So definieren Sie eine Klassenkomponente:

class Greetings extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}</h1>;
  }
}

6. Der Komponentenlebenszyklus

Komponenten verfügen über Lebenszyklusmethoden, die Sie überschreiben können, um Code in bestimmten Phasen auszuführen:

Montage:Wenn eine Komponente erstellt und in das DOM eingefügt wird.

• Konstruktor()
• render()
• componentDidMount()

Aktualisierung:Wenn sich Requisiten oder Status ändern.

• render()
• componentDidUpdate()

Unmounten:Wenn eine Komponente aus dem DOM entfernt wird.

• componentWillUnmount()

7. Klasseneigenschaften

defaultProps ermöglicht es Ihnen, Standardwerte für Requisiten zu definieren:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

Wenn props.color nicht angegeben ist, wird standardmäßig „Grau“ verwendet.

8. Requisitentypen

Wir können Prop-Types verwenden, um Typen übergebener Eigenschaften von Komponenten zu überprüfen. Es gibt Fehler, wenn sie nicht übereinstimmen.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

Dadurch wird eine Warnung angezeigt, dass der Typ für die ID nicht übereinstimmt.

9. Optimierung der Leistung

React ist auf Leistung ausgelegt, Sie können es jedoch weiter optimieren:

Production Build verwenden:

npm run build

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

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

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

useEffect: Manages side effects in function components.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! ?

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