React
ReactJS gebruiken op Flux-manier

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Zoeken…


Invoering

Het is erg handig om de Flux-aanpak te gebruiken, wanneer je applicatie met ReactJS op frontend is gepland om te groeien, vanwege beperkte structuren en een beetje nieuwe code om statusveranderingen in runtime gemakkelijker te maken.

Opmerkingen

Flux is de applicatie-architectuur die Facebook gebruikt voor het bouwen van client-side webapplicaties. Het is een aanvulling op de samengestelde weergavecomponenten van React door gebruik te maken van een unidirectionele gegevensstroom. Het is meer een patroon dan een formeel raamwerk, en u kunt Flux onmiddellijk gebruiken zonder veel nieuwe code.

Flux-toepassingen bestaan uit drie hoofdonderdelen: de dispatcher , de winkels en de views (React-componenten). Deze moeten niet worden verward met Model-View-Controller. Controllers bestaan wel in een Flux-applicatie, maar het zijn controller-views - views die vaak bovenaan de hiërarchie worden gevonden en die gegevens uit de winkels ophalen en doorgeven aan hun kinderen. Bovendien worden actiemakers - dispatcher-hulpmethoden - gebruikt om een semantische API te ondersteunen die alle wijzigingen beschrijft die mogelijk zijn in de toepassing. Het kan handig zijn om ze te beschouwen als een vierde deel van de Flux-updatecyclus.

Flux schuwt MVC ten gunste van een unidirectionele gegevensstroom. Wanneer een gebruiker een React-weergave gebruikt, wordt de weergave via een centrale dispatcher doorgestuurd naar de verschillende winkels met de gegevens en bedrijfslogica van de toepassing, die alle betrokken weergaven bijwerkt. Dit werkt vooral goed met React's declaratieve programmeerstijl, waarmee de winkel updates kan verzenden zonder op te geven hoe weergaven tussen staten moeten worden overgezet.

Informatiestroom

Dit is een overzicht van een uitgebreid overzicht .

Fluxpatroon veronderstelt het gebruik van unidirectionele gegevensstroom.

  1. Actie - eenvoudig voorwerp beschrijven maatregelen type en andere invoergegevens.

  2. Dispatcher - ontvanger met enkele actie en callbacks-controller. Stel je voor dat dit de centrale hub van je applicatie is.

  3. Winkel - bevat de applicatiestatus en logica. Het registreert callback in de dispatcher en zendt een gebeurtenis uit om te bekijken wanneer de gegevenslaag is gewijzigd.

  4. Weergave - Reageren op component die wijzigingsgebeurtenis en gegevens van winkel ontvangt. Het veroorzaakt opnieuw renderen wanneer er iets wordt veranderd.

    Vanaf de Flux-gegevensstroom kunnen weergaven ook acties maken en deze doorgeven aan de coördinator voor gebruikersinteracties.

teruggekeerd

Om het duidelijker te maken, kunnen we vanaf het einde beginnen.

  • Verschillende React-componenten ( views ) krijgen gegevens uit verschillende winkels over gemaakte wijzigingen.

    Weinig componenten kunnen controller-views worden genoemd, omdat ze de lijmcode verschaffen om de gegevens uit de winkels te halen en gegevens door te geven in de keten van hun nakomelingen. Controllerweergaven vertegenwoordigen elk belangrijk gedeelte van de pagina.

  • Winkels kunnen worden opgemerkt als callbacks die het actietype en andere invoergegevens vergelijken voor de bedrijfslogica van uw toepassing.

  • Dispatcher is een veelvoorkomende ontvanger voor acties en callbacks.

  • Acties zijn niets anders dan eenvoudige objecten met de vereiste eigenschap type .

    Voorheen wilt u constanten gebruiken voor actietypes en helpmethoden ( actiemakers genoemd ).



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow