React-Grundlagen

Hier finden Sie eine Erklärung der wichtigsten React-Terminologie mit Beispielen:

1. Komponente

Eine Komponente ist der Baustein einer React-Anwendung. Es handelt sich um eine JavaScript-Funktion oder -Klasse, die einen Teil der Benutzeroberfläche (Benutzeroberfläche) zurückgibt.

Funktionskomponente (üblich im modernen React):

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

Klassenkomponente (älterer Stil):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2. JSX (JavaScript XML)

Mit JSX können Sie HTML-ähnliche Syntax in JavaScript schreiben. Es ist syntaktischer Zucker für React.createElement().

Beispiel:

const element = <h1>Hello, world!</h1>;

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3. Requisiten (Eigenschaften)

Requisiten sind die Art und Weise, wie Daten von einer Komponente an eine andere übergeben werden. Sie sind schreibgeschützt und ermöglichen die Dynamik von Komponenten.

Beispiel:

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

<Greeting name="Alice" />

4. Staat

State ist ein JavaScript-Objekt, das dynamische Daten enthält und die gerenderte Ausgabe einer Komponente beeinflusst. Es kann mit setState (Klassenkomponenten) oder dem useState-Hook (funktionale Komponenten) aktualisiert werden.

Beispiel mit useState in Funktionskomponenten:

import { useState } from 'react';

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

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

5. Haken

Hooks sind Funktionen, mit denen Sie Status- und andere React-Funktionen in Funktionskomponenten verwenden können.

useState: Verwaltet den Zustand in Funktionskomponenten.
useEffect: Führt Nebenwirkungen in Funktionskomponenten aus.

AnwendungsbeispielWirkung:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6. Virtuelles DOM

Das virtuelle DOM ist eine leichtgewichtige Kopie des realen DOM. React nutzt dies, um Änderungen zu verfolgen und die Benutzeroberfläche effizient zu aktualisieren, indem nur die Teile des DOM neu gerendert werden, die sich geändert haben, und nicht die gesamte Seite.

7. Ereignisbearbeitung

React verwendet CamelCase für Event-Handler anstelle von Kleinbuchstaben, und Sie übergeben Funktionen als Event-Handler anstelle von Strings.

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

8. Rendern

Rendering ist der Prozess, bei dem React die DOM-Elemente an den Browser ausgibt. Komponenten rendern die Benutzeroberfläche basierend auf Requisiten, Status und anderen Daten.

Beispiel:

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

9. Bedingtes Rendern

Sie können verschiedene Komponenten oder Elemente basierend auf Bedingungen rendern.

Beispiel:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10. Listen und Schlüssel

In React können Sie Datenlisten mit der Methode „map()“ rendern, und jedes Listenelement sollte einen eindeutigen Schlüssel haben.

Beispiel:

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11. Den Staat anheben

Manchmal müssen mehrere Komponenten denselben Status haben. Sie „erhöhen“ den Staat zu seinem nächsten gemeinsamen Vorfahren, sodass er als Requisite weitergegeben werden kann.

Beispiel:

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

Dies sind die Grundkonzepte, die die Grundlage der React-Entwicklung bilden.

React Basics Teil 2

Pranav Bakare ・ 18. September

#javascript #reagieren

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