Wichtige Erkenntnisse aus meiner letzten Rezension der React Docs

Dieser Blog wurde ursprünglich auf Medium gepostet

Hallo, liebe React-Enthusiasten! Ich habe mich kürzlich eingehend mit der React-Dokumentation befasst und möchte meine Erkenntnisse mit Ihnen teilen. Dies ist eine prägnante Minimalanleitung für diejenigen, die eine solide Grundlage in React aufbauen möchten. Lassen Sie uns die Kernkonzepte mit einfachen Erklärungen und Codeausschnitten aufschlüsseln.

Dies wird eine etwas längere Geschichte, aber bitte warten Sie, bis Sie alle Kernkonzepte von React auf einmal verstehen. Es wird Ihnen nützlich sein, diese Konzepte noch einmal zusammenzufassen und noch einmal durchzugehen, um weitere Fortschritte zu erzielen.

Inhaltsverzeichnis

• Reagierendes Denken
• Komponenten und JSX
• Requisiten
• Bedingtes Rendering
• Rendering-Listen
• Reine Komponenten
• UI-Baum
• Interaktivität und Event-Handler
• Bundesland
• Kontrollierte Komponenten
• Unkontrollierte Komponenten
• Referenzen
• Standardverhalten verhindern
• Ereignisweitergabe
• Komplexe Zustände verwalten
• Kontext
• Nebenwirkungen
• Die Best Practices von useEffect
• Reaktionsregeln
• Benutzerdefinierte Haken
• Hakenregeln

Denken in der Reaktion

Bei React geht es darum, Ihre Benutzeroberfläche in wiederverwendbare Komponenten zu unterteilen. Beginnen Sie beim Erstellen einer React-App mit:

1. Aufteilen der Benutzeroberfläche in eine Komponentenhierarchie
2. Erstellen einer statischen Version ohne Interaktivität
3. Identifizierung der minimalen Darstellung des UI-Status
4. Bestimmen, wo Ihr Staat leben soll
5. Hinzufügen eines inversen Datenflusses

Referenz: https://react.dev/learn/thinking-in-react

Komponenten und JSX

Komponenten sind die Bausteine ​​von React-Anwendungen. Sie können funktional oder klassenbasiert sein (altmodisch, nicht empfohlen). JSX ist eine Syntaxerweiterung, mit der Sie HTML-ähnlichen Code in Ihr JavaScript schreiben können.

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

Referenzen:

• Komponenten: https://react.dev/learn/your-first-component
• JSX: https://react.dev/learn/writing-markup-with-jsx

Requisiten

Requisiten sind die Art und Weise, wie wir Daten von übergeordneten an untergeordnete Komponenten übergeben. Sie sind schreibgeschützt und tragen dazu bei, dass unsere Komponenten rein bleiben.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<greeting username="Alice"></greeting>

Referenz: https://react.dev/learn/passing-props-to-a-component

Bedingtes Rendern

Mit React können Sie Komponenten oder Elemente basierend auf bestimmten Bedingungen bedingt rendern.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1 id="Welcome-back">Welcome back!</h1> : <h1 id="Please-sign-in">Please sign in.</h1>;
}

Referenz: https://react.dev/learn/conditional-rendering

Rendering-Listen

Verwenden Sie die Funktion „map()“, um Listen von Elementen in React zu rendern. Vergessen Sie nicht, jedem Artikel einen eindeutigen Schlüssel hinzuzufügen.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    

{fruits.map((fruit) => (
• {fruit.name}
))}

); }

Referenz: https://react.dev/learn/rendering-lists

Reine Komponenten

Reine Komponenten rendern immer die gleiche Ausgabe für die gleichen Requisiten und den gleichen Zustand. Sie sind vorhersehbar und einfacher zu testen.

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

Referenz: https://react.dev/learn/keeping-components-pure

UI-Baum

React erstellt und verwaltet eine interne Darstellung Ihrer Benutzeroberfläche, die als virtuelles DOM bezeichnet wird. Dadurch kann React effizient nur die Teile des tatsächlichen DOM aktualisieren, die sich geändert haben.

Referenz: https://react.dev/learn/understanding-your-ui-as-a-tree

Interaktivität und Event-Handler

React verwendet synthetische Ereignisse, um Benutzerinteraktionen in verschiedenen Browsern konsistent zu verarbeiten.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<greeting username="Alice"></greeting>

Referenz: https://react.dev/learn/responding-to-events

Zustand

Der Status wird für Daten verwendet, die sich im Laufe der Zeit in einer Komponente ändern. Verwenden Sie den useState-Hook, um Funktionskomponenten einen Status hinzuzufügen.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1 id="Welcome-back">Welcome back!</h1> : <h1 id="Please-sign-in">Please sign in.</h1>;
}

Referenz: https://react.dev/learn/state-a-components-memory

Kontrollierte Komponenten

Der Zustand kontrollierter Komponenten wird von React gesteuert.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    

{fruits.map((fruit) => (
• {fruit.name}
))}

); }

Unkontrollierte Komponenten

Unkontrollierte Komponenten verwalten ihren Zustand direkt im DOM.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

Refs

Refs bieten eine Möglichkeit, auf DOM-Knoten oder React-Elemente zuzugreifen, die in der Render-Methode erstellt wurden.

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

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

Verhindern von Standardverhalten

Verwenden Sie „preventDefault()“, um das Standardverhalten des Browsers für bestimmte Ereignisse zu stoppen.

import React, { 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>
  );
}

Ereignisausbreitung

React-Ereignisse breiten sich ähnlich aus wie native DOM-Ereignisse. Sie können stopPropagation() verwenden, um das Sprudeln von Ereignissen zu verhindern.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value="{value}" onchange="{e"> setValue(e.target.value)} />;
}

Komplexe Zustände verwalten

Erwägen Sie die Verwendung des useReducer-Hooks oder einer Zustandsverwaltungsbibliothek wie Redux oder Zustand für komplexe Zustandslogik.

function UncontrolledInput() {
  return <input defaultvalue="Hello">;
}

Kontext

Kontext bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell weitergeben zu müssen.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    
      <input ref="{inputEl}" type="text">
      <button onclick="{onButtonClick}">Focus the input</button>
    >
  );
}

Referenz: https://react.dev/learn/passing-data-deeply-with-context

Nebenwirkungen

Nebenwirkungen sind Vorgänge, die etwas außerhalb des Bereichs der ausgeführten Funktion betreffen, wie z. B. das Abrufen von Daten oder die DOM-Manipulation. Verwenden Sie den useEffect-Hook, um Nebenwirkungen zu verwalten.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return 

...

; }

Die Best Practices von useEffect

1. Fügen Sie immer alle Variablen, von denen Ihr Effekt abhängt, in das Abhängigkeitsarray ein.
2. Vermeiden Sie Endlosschleifen, indem Sie die Abhängigkeiten Ihres Effekts sorgfältig berücksichtigen.
3. Nebenwirkungen in der Return-Funktion von useEffect bereinigen.

function Parent() {
  return (
    <div onclick="{()"> console.log('Parent clicked')}>
      <child></child>
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

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

Referenzen:

• Möglicherweise benötigen Sie useEffect nicht: https://react.dev/learn/you-might-not-need-an-effect
• Synchronisieren mit Effekten: https://react.dev/learn/synchronizing-with-effects
• Lebenszyklus reaktiver Effekte: https://react.dev/learn/lifecycle-of-reactive-effects

Reaktionsregeln

1. Komponentennamen immer mit einem Großbuchstaben beginnen.
2. Schließen Sie alle Tags, einschließlich selbstschließender Tags.
3. Ändern Sie Requisiten nicht direkt.
4. Halten Sie die Komponenten nach Möglichkeit rein.

Referenz: https://react.dev/reference/rules

Benutzerdefinierte Haken

Benutzerdefinierte Hooks ermöglichen es Ihnen, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren.

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

Regeln für Hooks

1. Rufen Sie Hooks nur auf der obersten Ebene Ihrer Komponente auf.
2. Nur ​​Hooks von React-Funktionskomponenten oder benutzerdefinierten Hooks aufrufen.
3. Verwenden Sie eslint-plugin-react-hooks, um diese Regeln durchzusetzen.

Referenz: https://react.dev/reference/rules/rules-of-hooks

Das ist der Abschluss unserer React-Reise! Denken Sie daran: Der beste Weg zu lernen ist, etwas zu tun. Beginnen Sie mit der Erstellung von Projekten, experimentieren Sie mit diesen Konzepten und scheuen Sie sich nicht, in die React-Dokumentation einzutauchen, wenn Sie weitere Details benötigen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonWichtige Erkenntnisse aus meiner letzten Rezension der React Docs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!