Wie erstelle ich eine App mit React? Einzelheiten zu den Schritten zum Erstellen umfangreicher Anwendungen mit React+Redux

In diesem Artikel wird hauptsächlich react+redux zum Erstellen umfangreicher Anwendungen vorgestellt. Werfen wir nun einen Blick auf den Inhalt des Artikels

Hintergrund

Unser Team hat ein Projekt, dessen Entwicklung lange dauert und bei dem eine gemischte Entwicklungsmethode aus Front- und Back-Ends verwendet wird Die Kosten sind sehr hoch und es wird online aufgedeckt. Es gibt viele Probleme. Und da es mit mehr als 100 Produktlinien des Unternehmens verbunden ist, gehen täglich zahlreiche Kundenbeschwerden und Produktlinien-Feedbacks ein. Im November 2017 haben wir das Produkt als Vorreiter übernommen, den Prozess auf Produktebene neu gestaltet und das Front- und Backend des Projekts neu aufgebaut. Als Frontend-Verantwortlicher nutze ich diesen Artikel, um einige meiner Erfahrungen im gesamten Prozess von der Technologieauswahl über die Entwicklung bis zur Einführung zu teilen.

Nachdenken über die Technologieauswahl

Lassen Sie uns zunächst einen Blick auf die folgenden Seiten unseres Projekts werfen, um einige ihrer Eigenschaften zusammenzufassen.

Bei unseren Seiten handelt es sich größtenteils um Formulare, die vom Benutzer ausgefüllt werden müssen. Es besteht keine Notwendigkeit, große Datenmengen anzufordern und darzustellen, wenn die Seite geöffnet ist Laden. Darüber hinaus muss eine Seite viele Zustände anzeigen (die drei Bilder oben sind beispielsweise Bestandteil des Projekts). Es gibt auch die wichtigsten Geschäftsanforderungen von Baidu, und verschiedene Unternehmen haben ihre eigenen, einzigartigen Kontobezeichnungen. Zusätzlich zu einigen allgemeinen Prozessen durchlaufen diese Konten auch einige Prozesse, die den Eigenschaften des Produkts entsprechen Linien.

Durch die Kombination dieser Geschäftsmerkmale und meiner bisherigen Entwicklungserfahrung mit Nodejs und React fällt meine allgemeine Technologieauswahl auf FIS3+Nodejs+React+Redux+React-Router. Was können diese Technologieauswahlen also bringen?

1. Das Frontend kann das Routing von Seitensprüngen auf der Browserseite steuern, was die Flexibilität der Frontend-Entwicklung erhöht;

2. Die Seite kann entsprechend den Geschäftsanforderungen angepasst werden. Wählen Sie im Dienst das Rendering der Template-Engine oder das isomorphe Rendering aus.

3. Das Frontend verwaltet Fehlercodekopie und Seitenkopie auf einheitliche Weise und verwendet Nodejs, um sie offline zu aktualisieren.

4. Mit Redux ist es bequemer, Daten komponentenübergreifend zu teilen (mehrere Seiten). Reduzieren Sie bedeutungslose Netzwerkanfragen. Verbessern Sie die Stabilität und Verfügbarkeit des Projektbetriebs.

Hier sprechen wir kurz über die Auswahl von Engineering-Tools. Das derzeit beliebteste Engineering-Tool der Branche ist Webpack. Abgesehen vom Lesen der Dokumentation habe ich nicht viel praktische Anwendungserfahrung. Ich habe immer geglaubt, dass die Verwendung von Tools Entwicklern dabei helfen soll, einige unbedenkliche Aufgaben zu lösen, die während des Entwicklungsprozesses häufige manuelle Vorgänge erfordern. Unabhängig vom Webpack können wir den Code immer noch manuell kompilieren, manuell bereitstellen und die Seite für die Entwicklung manuell aktualisieren. Durch die Verwendung von Tools wird diese Reihe von Prozessen nur kohärent und die Entwicklungskosten gesenkt.

Bei all meinen unternehmensbezogenen Projekten wähle ich FIS3. Ich denke auch, dass es einfach zu bedienen ist und meine verschiedenen technischen Anforderungen erfüllen kann. Ich bin nicht gegen Webpack. Ich habe einfach keinen Grund gefunden, das FIS3, das ich derzeit verwende, aufzugeben und Webpack zu verwenden.

Der Unterschied zwischen dem alten und dem neuen Framework-Mechanismus

Hier finden Sie eine kurze Einführung in einige Unterschiede im Rendering-Mechanismus der Rendering-Seite, nachdem Sie sich für die Technologieauswahl entschieden haben.

Zuvor verwendete das alte Projekt den PHP+Smarty-Rendering-Modus, um die Seite auf der Serverseite zu rendern und sie dann an den Front-End-Browser auszuspucken. Nach der Verwendung der neuen technischen Architektur ist die Art und Weise, wie wir Seiten rendern, flexibler. Sie können wählen, ob das Rendern auf der Serverseite erfolgen soll, ob das Rendern ausschließlich dem Browser überlassen werden soll oder ob das Rendern isomorph erfolgen soll. Da unsere Seite nicht viele Daten laden muss, wenn sie auf dem ersten Bildschirm angezeigt wird, lasse ich den Großteil der Seite dennoch auf der Browserseite rendern.

Ein weiterer Unterschied besteht darin, dass alle vorherigen Anfragen von Benutzern auf den PHP-Server fallen. Anfragen für das neue Framework werden an den Front-End-Nodejs-Server gesendet. Front-End-Ingenieuren geht es also nicht nur darum, gute Seiten zu schreiben und die Kompatibilität sicherzustellen. Es wird auch die technischen Fähigkeiten von Front-End-Ingenieuren testen.

Der Komfort, den React dem Front-End bietet

Front-End-Steuerungsrouting-Rendering-Seite

Die zuvor besprochene Technologieauswahl hat Die bereits erwähnte Verwendung von React-Router übernimmt die Steuerung des Seitenroutings. Darüber hinaus bietet React-Router die Funktion des asynchronen Ladens von Komponenten, die eine technische Grundlage für das asynchrone Laden unserer online optimierten Seiten bietet.

<Route path="/v4/appeal/fillname" component={FillName} />
{* 这里对某些组件做异步加载 *}
<Route
    path="/v4/appeal/selectuser"
    getComponent={selectUser()}
/>function selectUser() {
    return (location, cb) => {            require([&#39;../accountselect/container/AccountSelect&#39;], function (component) {
                cb(null, component);
            });
        };
    }

Zusätzlich zum Front-End-Code für die Routing-Steuerung durch React-Router muss der Server möglicherweise auch einige Konfigurationen vornehmen. Andernfalls wird unsere Seite beim Zurücksetzen Probleme haben (die Seite kann die Route nicht finden). Tatsächlich dient es der Steuerung des Routings in dem, was wir normalerweise als Aktion bezeichnen. Da ich Nodejs verwende, ist meine Konfiguration wie folgt.

router.get('/fillname', router.action('index'));
router.get('/selectuser', router.action('index'));

Events

Aufgrund von Open-Source-Protokollproblemen habe ich Preact kurzzeitig für Front-End-Events verwendet. Der größte Unterschied zwischen React und Preact besteht in der Kapselung einiger Ereignisse. Dadurch ist Preact viel kleiner als React.
Bei der mobilen Entwicklung ist das Problem der clickEreignisverzögerung 300 ms ein Problem, mit dem das Frontend häufig konfrontiert ist. Dieses Problem tritt auch bei dem in React bereitgestellten onClick-Ereignis auf. Wenn wir möchten, dass Feedback sofort nach dem Klicken auf eine Schaltfläche an anderen Stellen angezeigt wird, verwenden Sie am besten das Ereignis onTouchEnd oder das Open-Source-Npm-Paket react-fastclick, um das Ereignis click 300msVerzögerungsproblem. Die von

verwendete Methode besteht darin, die folgende Anweisung am Eingang unseres Codes zu deklarieren, die das Verhalten des

-Ereignisses von React standardmäßig ändert onClick

import initReactFastclick from 'react-fastclick';

initReactFastclick();

Das Design der Komponente

Ein Problem bei der Verwendung von React besteht möglicherweise darin, ob meine Komponente zustandslos oder zustandsbehaftet sein soll. So teile ich meinen Komponentenstatus. Wann sollte ich Redux zum Verwalten des Komponentenstatus verwenden? Solche Fragen könnten Sie haben, wenn Sie zum ersten Mal mit React in Kontakt kommen.

Ein extremerer Ansatz besteht darin, Redux zu verwenden, um alle Zustände von Komponenten zu verwalten, unabhängig davon, ob der Zustand geteilt werden muss oder nicht. Dieser Ansatz bedeutet, dass wir viele Aktionen schreiben müssen. Wenn es ein oder zwei Seiten sind, ist es in Ordnung, wenn es mehr als ein Dutzend Seiten sind, können tatsächliche Schreibaktionen zum Absturz führen.

Was sind also die Best Practices? Schauen Sie sich das Bild unten an

Wenn wir eine Komponente schreiben möchten, überlegen Sie zunächst, ob diese Komponente ihren eigenen Status mit anderen Komponenten teilen muss. Bei Bedarf sollten wir es als zustandsbehaftete Komponente entwerfen und den gemeinsamen Zustand mithilfe von Redux verwalten. Wenn es sich einfach um eine zustandslose Komponente handelt oder die Zustandsänderung der Komponente selbst keine Auswirkungen auf andere Komponenten hat, kann die Komponente als zustandslose Komponente entworfen werden (obwohl sie als zustandslose Komponente bezeichnet wird, kann dies auch der Zustand der Komponente selbst sein). kann mit

verwaltet ermittelt werden). this.state

Beziehung von Komponenten wiederverwenden

Einer der Hotspots in React ist die Idee der Komponentenentwicklung. So klein wie eine Schaltfläche auf der Seite kann als Komponente gestaltet werden. Da es sich um eine Komponente handelt, sollten wir zunächst überlegen, wie diese Komponente von anderen Komponenten wiederverwendet werden kann. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte

React Reference Manual der PHP Chinese-Website, um mehr zu erfahren)

Als einfaches Beispiel wird die Popup-Komponente verwendet das gesamte Projekt:

class AlertForm extends Component {
    constructor(props) {
        super(props);        this.state = {
            showlayout: false,  // false 以tip的方式提示错误， true以弹层的方式提示错误
            btnlist: false,
            formbtn: false
        };
    }
    componentWillReceiveProps(nextProps) {
    }
    handleHideLayout = () => {
    }
    handleMobile = () => {
    }
    handleChangeCheck = () => {
        history.go(-1);
    }
    render() {        return (            <p className="component-alertform" style={this.
    state.showlayout ? {display: &#39;block&#39;} : {display: &#39;none&#39;}}>
            </p>
        );
    }
}
export default AlertForm;

Wir abstrahieren diese Komponente, die auf anderen Seiten verwendet werden kann, separat und verwenden sie bei Bedarf

. import

import AlertForm from &#39;../../components/AlertForm&#39;;<AlertForm    errno={errno}
    stateObj={fillAppealName}
    actions={actions}/>

Paketoptimierung der Entwicklungsumgebung und Produktionsumgebung

Eine der Aufgaben, die nach Abschluss des Projekts erledigt werden müssen, ist die Optimierung, bevor ich online gehe lautet wie folgt:

Wie bereits erwähnt, befolgen die meisten Benutzer nur einige gängige Prozesse. Einige Benutzer mit Produktlinienmerkmalen durchlaufen einige spezielle Prozesse. Daher müssen Sie Komponenten entpacken und asynchron laden, bevor Sie online gehen. Die Einzelheiten wurden bereits erwähnt. Beim Packen müssen die js dieser Seiten mithilfe von Packtools separat verarbeitet werden.

Tatsächlich wird es zusätzlich zu diesen Seiten, die asynchron geladen werden müssen, auch einige andere selbstgeschriebene lib-Bibliotheken (kleine, von Ihnen selbst geschriebene Funktionen) geben. Hinzu kommen beispielsweise die Korrespondenzen zwischen Provinzen, Städten und Regionen im ganzen Land sowie die Korrespondenz zwischen Telefonvorwahlen. Da sich diese Funktionen oder regionalen Beziehungskarten grundsätzlich nicht ändern, nachdem sie online gehen, werden sie getrennt von den Business-JS verpackt.

Unsere Verpackungskonfigurationsdateien lauten wie folgt:

Betrieb und Wartung

Wie bereits erwähnt, haben wir Ich habe über die Verwendung von Nodejs gesprochen. Die mittlere Ebene übernimmt die Routing-Steuerung und das serverseitige Rendering. Das Bild unten ist ein Echtzeit-Statusdiagramm der oben genannten Dienste, das beim Schreiben dieses Artikels erfasst wurde. Es lässt sich feststellen, dass die Speicher- und Festplatten-E/A-Auslastung der gesamten Anwendung immer noch sehr normal ist, die CPU-Auslastung jedoch etwas hoch ist, was ebenfalls ein Bereich ist, der in Zukunft optimiert werden muss.

Was ich hier sagen möchte, ist, dass die persönlichen Qualitätsanforderungen für Front-End-Ingenieure relativ hoch sein werden, wenn Sie Nodejs und serverseitiges Rendering verwenden, da sie sich mit vielen serverseitigen Problemen befassen müssen. Ich habe zuvor auch einen Artikel über den Umgang mit Sicherheitsarbeitsaufträgen geteilt. Wir müssen uns nicht nur mit serverseitigen Problemen auseinandersetzen, sondern auch mit Problemen im Zusammenhang mit der Internetsicherheit.

Weitere Funktionen hinzugefügt

Verwenden Sie Nodejs zusätzlich zum serverseitigen Rendering. Ich erledige auch andere Arbeiten mit Nodejs.

Zum Beispiel verwende ich Nodejs, um eine solche JSON-Datei serverseitig zu verwalten. Die PHP-Seite verwaltet keine Fehlercodes und keine Kopie der Fehlercodeanzeige mehr. Für eine einheitliche Verwaltung muss das gesamte Front-End-Display-Copywriting auf der Nodejs-Seite platziert werden. Darüber hinaus kann ich diese Fehler beim Copywriting auch offline dynamisch über das System aktualisieren. Verbessern Sie die Systemverfügbarkeit.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React User Manual auf der chinesischen PHP-Website, um mehr zu erfahren). Sie können unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine App mit React? Einzelheiten zu den Schritten zum Erstellen umfangreicher Anwendungen mit React+Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!