Advanced React -Techniken, die jeder leitende Entwickler beherrschen sollte

reagt, eine führende JavaScript-Bibliothek für die Herstellung von Benutzeroberflächen (insbesondere einseitige Anwendungen), erfordert die Beherrschung fortschrittlicher Techniken zum Aufbau effizienter, skalierbarer und aufrechterhaltener Projekte. In diesem Artikel werden 20 wesentliche erweiterte Reaktionskonzepte für hochrangige Entwickler untersucht, die gegebenenfalls mit TypeScript -Beispielen veranschaulicht werden.

1. Komponenten höherer Ordnung (HOCs): hocs fördern Code-Wiederverwendbarkeit durch Einnahme einer Komponente und Rückgabe einer modifizierten Version.

<code class="language-typescript">import React from 'react';

const withLogger = (WrappedComponent: React.ComponentType) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent: React.FC = () => <div>Hello World</div>;
const MyComponentWithLogger = withLogger(MyComponent);</code>

2. Requisiten rendern: Code zwischen Komponenten mithilfe einer Requisition teilen, deren Wert eine Funktion ist.

<code class="language-typescript">import React from 'react';

interface DataFetcherProps {
  render: (data: any) => JSX.Element;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ render }) => {
  const data = { name: 'John Doe' };
  return render(data);
};

const MyComponent: React.FC = () => (
  <DataFetcher render={(data) => <div>{data.name}</div>} />
);</code>

3. Kontext -API: erleichtert die Datenaustausch über Komponenten hinweg, wobei sie Prop -Bohrungen beseitigen.

<code class="language-typescript">import React, { createContext, useContext } from 'react';

const MyContext = createContext<string | null>(null);

const MyProvider: React.FC = ({ children }) => {
  const value = 'Hello from Context';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

const MyComponent: React.FC = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};</code>

4. benutzerdefinierte Hooks: statenträger Logik einkapseln und wiederverwenden.

<code class="language-typescript">import { useState, useEffect } from 'react';

const useFetch = (url: string) => {
  const [data, setData] = useState<any | null>(null);
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);
  return data;
};

const MyComponent: React.FC = () => {
  const data = useFetch('https://api.example.com/data');
  return <div>{data ? data.name : 'Loading...'}</div>;
};</code>

5. Fehlergrenzen: Fangen und Behandeln von JavaScript -Fehlern in Komponentenbäumen.

<code class="language-typescript">import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error: any, errorInfo: any) {
    console.error(error, errorInfo);
  }

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

const MyComponent: React.FC = () => {
  throw new Error('Test error');
  return <div>Hello World</div>;
};

const App: React.FC = () => (
  <ErrorBoundary><MyComponent /></ErrorBoundary>
);</code>

6. Code -Aufteilung: Verbesserung der anfänglichen Ladezeiten, indem Code in kleinere Stücke aufgeteilt wird. (Webpack, Rollup usw.)

<code class="language-typescript">import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const MyComponent: React.FC = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);</code>

7. Memoisierung (Usememo): Die Leistung optimieren, indem teure Berechnungen zwischengespeichert werden.

<code class="language-typescript">import React, { useMemo } from 'react';

const MyComponent: React.FC = ({ items }) => {
  const sortedItems = useMemo(() => items.sort(), [items]);
  return <div>{sortedItems.join(', ')}</div>;
};</code>

8. Portale: Kinder in einen anderen Teil des Doms umstellen

<code class="language-typescript">import React from 'react';
import ReactDOM from 'react-dom';

const MyPortal: React.FC = () => {
  return ReactDOM.createPortal(
    <div>This is rendered in a portal</div>,
    document.getElementById('portal-root')!
  );
};</code>

9. Fragmente: Gruppenkinder ohne zusätzliche Dom -Knoten.

<code class="language-typescript">import React from 'react';

const MyComponent: React.FC = () => (
  <React.Fragment>
    <div>Item 1</div>
    <div>Item 2</div>
  </React.Fragment>
);</code>

10. Refs und DOM: Zugriffsdom -Knoten oder reagierte Elemente.

<code class="language-typescript">import React, { useRef, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
};</code>

11. Weiterleitungsrefits: Pass -Refs durch Komponenten an ihre Kinder.

<code class="language-typescript">import React, { forwardRef, useRef } from 'react';

const MyInput = forwardRef<HTMLInputElement>((props, ref) => (
  <input {...props} ref={ref} />
));

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <MyInput ref={inputRef} />;
};</code>

12. kontrollierte und unkontrollierte Komponenten: Komponentenzustand entweder extern oder intern verwalten.

<code class="language-typescript">import React, { useState, useRef } from 'react';

const ControlledComponent: React.FC = () => {
  const [value, setValue] = useState('');
  return <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />;
};

const UncontrolledComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <input type="text" ref={inputRef} />;
};</code>

13. Leistungsoptimierung (React.Memo, Usememo, UseCallback): Verhindern Sie unnötige Wiederholer.

<code class="language-typescript">import React, { useCallback, memo } from 'react';

const MyComponent: React.FC<{ onClick: () => void }> = memo(({ onClick }) => {
  console.log('Rendering MyComponent');
  return <button onClick={onClick}>Click me</button>;
});

const ParentComponent: React.FC = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <MyComponent onClick={handleClick} />;
};</code>

14. Serverseitiges Rendering (SSR): Renderkomponenten auf dem Server für eine verbesserte SEO und Leistung. (Benötigt ein serverseitiges Framework wie Next.js oder Remix.)

15. statische Site-Erzeugung (SSG): Seiten vor dem Render zum Bauzeit. (Next.js, Gatsby usw.)

16. Inkrementelle statische Regeneration (ISR): statische Inhalte nach der Build -Zeit aktualisieren. (Next.js)

17. gleichzeitiger Modus: Verbesserung der Reaktionsfähigkeit und verhandeln Sie Unterbrechungen anmutig.

<code class="language-typescript">import React from 'react';

const withLogger = (WrappedComponent: React.ComponentType) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent: React.FC = () => <div>Hello World</div>;
const MyComponentWithLogger = withLogger(MyComponent);</code>

18. Spannung für das Abrufen von Daten: Deklarativ Ladezustände während des Datenabrufens.

<code class="language-typescript">import React from 'react';

interface DataFetcherProps {
  render: (data: any) => JSX.Element;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ render }) => {
  const data = { name: 'John Doe' };
  return render(data);
};

const MyComponent: React.FC = () => (
  <DataFetcher render={(data) => <div>{data.name}</div>} />
);</code>

19. Reaktionsabfrage: Vereinfachen Sie das Abholen, die Zwischenspeicherung und die Synchronisation.

<code class="language-typescript">import React, { createContext, useContext } from 'react';

const MyContext = createContext<string | null>(null);

const MyProvider: React.FC = ({ children }) => {
  const value = 'Hello from Context';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

const MyComponent: React.FC = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};</code>

20. React Server-Komponenten: clientseitige Interaktivität mit serverseitigen Rendern-Vorteilen kombinieren. (Benötigt ein Framework, das RSC wie Next unterstützt.js 13.)

Schlussfolgerung: Beherrschen dieser fortschrittlichen Techniken ermöglichen Senior React-Entwicklern, leistungsstarke, aufwartbare und robuste Anwendungen zu erstellen. Durch die Integration dieser Strategien in Ihren Workflow sind Sie für komplexe Projekte ausgestattet und außergewöhnliche Benutzererlebnisse liefern.

Das obige ist der detaillierte Inhalt vonAdvanced React -Techniken, die jeder leitende Entwickler beherrschen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!