React-Grundlagen Teil 2

Hier sind einige fortgeschrittenere React-Konzepte und -Terminologien:

12. Kontext-API

Die Kontext-API bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen. Es ist nützlich für globale Daten wie Themen, Authentifizierung oder Benutzerdaten.

Beispiel:

const ThemeContext = React.createContext('light');

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>I am styled by {theme} theme!</button>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

13. Refs

Refs bieten eine Möglichkeit, auf DOM-Knoten oder React-Elemente zuzugreifen, die in der Render-Methode erstellt wurden. Es wird oft verwendet, um ein DOM-Element direkt zu ändern oder den Fokus zu verwalten.

Beispiel:

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

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

14. Komponente höherer Ordnung (HOC)

Ein HOC ist eine Funktion, die eine Komponente übernimmt und eine neue Komponente zurückgibt. Es wird oft verwendet, um Komponentenlogik wiederzuverwenden.

Beispiel:

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Rendering component');
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

15. React.memo

React.memo ist eine Komponente höherer Ordnung, die durch das Auswendiglernen einer Komponente zur Leistungsoptimierung beiträgt. Wenn sich die Requisiten nicht geändert haben, überspringt die Komponente das erneute Rendern.

Beispiel:

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

16. Verwenden Sie den Reduzierhaken

Der useReducer-Hook ist eine Alternative zu useState. Dies ist nützlich für die Verwaltung komplexerer Zustandslogik, insbesondere wenn der Zustand von vorherigen Werten abhängt.

Beispiel:

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

17. Fragmente reagieren

Mit React Fragments können Sie eine Liste von untergeordneten Elementen gruppieren, ohne dem DOM zusätzliche Knoten hinzuzufügen.

Beispiel:

function Table() {
  return (
    <>
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
    </>
  );
}

18. Portale

Portale bieten eine Möglichkeit, untergeordnete Elemente in einem DOM-Knoten darzustellen, der außerhalb der Hierarchie der übergeordneten Komponente existiert.

Beispiel:

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

19. Fehlergrenzen

Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler an einer beliebigen Stelle in ihrem untergeordneten Komponentenbaum abfangen, diese Fehler protokollieren und eine Fallback-Benutzeroberfläche anzeigen.

Beispiel:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

20. Lazy Loading

React unterstützt das verzögerte Laden von Komponenten, was bedeutet, dass Komponenten bei Bedarf asynchron geladen werden können, was die Leistung großer Anwendungen verbessert.

Beispiel:

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

21. StrictMode

StrictMode ist ein Tool zum Hervorheben potenzieller Probleme in einer Anwendung. Es stellt keine sichtbare Benutzeroberfläche dar, prüft jedoch auf Probleme wie veraltete Lebenszyklusmethoden.

Beispiel:

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

22. Kontrollierte vs. unkontrollierte Komponenten

Kontrollierte Komponenten: Formularelemente, bei denen der Wert durch den Reaktionszustand gesteuert wird.

Unkontrollierte Komponenten: Formularelemente, bei denen der Wert vom DOM verarbeitet wird.

Example of Controlled Component:

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Example of Uncontrolled Component:

function UncontrolledInput() {
  const inputRef = useRef(null);

  return <input type="text" ref={inputRef} />;
}

23. Propellerbohren

Prop Drilling tritt auf, wenn Daten über mehrere Ebenen von Komponenten weitergegeben werden, um ein tief verschachteltes untergeordnetes Element zu erreichen. Dies kann durch die Verwendung der Kontext-API oder von Statusverwaltungsbibliotheken vermieden werden.

Example of Prop Drilling:

function Grandparent() {
  const name = "John";
  return <Parent name={name} />;
}

function Parent({ name }) {
  return <Child name={name} />;
}

function Child({ name }) {
  return <p>{name}</p>;
}

24. Rendering-Lebenszyklus

React-Komponenten haben einen Lebenszyklus mit Methoden, die in verschiedenen Phasen aufgerufen werden, z. B. beim Mounten, Aktualisieren und Unmounten.

Lebenszyklusmethoden (Klassenkomponenten):

1. - ComponentDidMount
2. - ComponentDidUpdate
3. - ComponentWillUnmount

Beispiel:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello!</div>;
  }
}

25. useRef Hook

Der useRef-Hook wird verwendet, um Werte über mehrere Renderings hinweg beizubehalten, ohne ein erneutes Rendering zu verursachen. Es wird häufig für den Zugriff auf DOM-Elemente oder das Speichern veränderlicher Werte verwendet.

Beispiel:

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

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

  return <p>Check the console to see the timer.</p>;
}

Diese zusätzlichen Konzepte werden Ihnen helfen, Ihr Verständnis von React zu vertiefen und komplexere Szenarien zu bewältigen!

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