Richtiges Verwenden von jQuery in React

1. Können Sie jQuery in React verwenden
2. Der richtige Weg, jQuery in React zu verwenden
3. Sollten Sie jQuery in React verwenden

jQuery ist eine der bekanntesten Bibliotheken, die von JavaScript-Entwicklern verwendet wird.

Die Bibliothek bietet eine einfache Möglichkeit, DOM-Manipulationen und -Animationen durchzuführen, um nur einige zu nennen. Aufgrund seiner Popularität sind viele Webentwickler damit vertraut und ziehen es vor, jQuery zu verwenden, wenn sie können.

React ist eine weitere beliebte Bibliothek, die von Facebook entwickelt wurde. In den letzten Jahren hat es sich den Titel des am weitesten verbreiteten JavaScript-Frameworks verdient.

Es ist wohl moderner und hat mehr Funktionen als jQuery. Während Sie beide Bibliotheken in einer einzigen Anwendung verwenden können, gibt es Regeln für die Verwendung von jQuery in React-Anwendungen.

Können Sie jQuery in React verwenden

Es ist möglich, jQuery in einer React-App zu verwenden, solange Sie es richtig verwenden und seine Platzierung sorgfältig auswählen. Ebenso können Sie React in jQuery einbetten.

Was sind die Einschränkungen von jQuery in React

Die Haupteinschränkung bei der Verwendung von jQuery in React besteht darin, dass jQuery das DOM manuell aktualisiert. Auf der anderen Seite hat React sein System, um Änderungen am DOM vorzunehmen.

Es bestimmt intern, wann eine React-App oder -Komponente neu gerendert werden soll. Es ermittelt auch, welche Teile der Benutzeroberfläche aktualisiert werden müssen.

Wenn Sie also jQuery verwenden, um das DOM zu manipulieren, wird React verwirrt. Aus diesem Grund wird es unter normalen Umständen als schlechte Praxis angesehen, jQuery in React zu verwenden, aber es gibt Ausnahmen.

Der richtige Weg, jQuery in React zu verwenden

Zuerst müssen Sie die jQuery-Bibliothek installieren und dann wie folgt importieren:

import $ from 'jquery';

Wie bereits erwähnt, sind jQuery und React zwei Bibliotheken, die sich mit der DOM-Manipulation befassen. Um sicherzustellen, dass jQuery React nicht stört, müssen wir eine Komponente erstellen, die niemals von React aktualisiert wird.

Wie können wir das tun? Wie Sie vielleicht wissen, werden React-Komponenten neu gerendert, wenn sich ihr state oder props ändert. Also müssen wir eine Komponente bauen, die keinen state oder props hat.

Schauen wir uns ein Beispiel an:

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

Um sicherzustellen, dass React niemals das DOM für die App-Komponente aktualisiert, initiieren wir keinen Status und verwenden keine prop-Werte. Unsere return-Anweisung besteht aus den statischen Wrapper- und Absatzelementen.

Auf diese Weise können wir dem jQuery-Plugin den Weg frei machen, das DOM zu manipulieren und alle Absatzelemente direkt auszublenden.

Eine weitere gute Möglichkeit, DOM-Elemente direkt auszuwählen, ist die Verwendung eines ref.

Sollten Sie jQuery in React verwenden

React verfügt über integrierte Funktionen, mit denen Sie das DOM in den meisten Fällen manipulieren können. Das Arbeiten im Rahmen von React-Komponenten ermöglicht es Ihnen, das Verhalten und Erscheinungsbild Ihrer Anwendung zu steuern.

Wenn Sie sicher sind, dass Sie jQuery verwenden und die oben genannten Einschränkungen einhalten müssen, können Sie dies tun. jQuery hat jedoch eine begrenzte Anzahl von Anwendungen innerhalb von React.