React Component Standards

Table of contents

• React Component Standards
  • Onderwerpen
    • Stateless vs Stateful components
    • Functional vs Class components
    • Presentational vs Container components
  • Conclusies

---

Onderwerpen

Er zijn een aantal best practice onderwerpen betreft React

Stateless vs Stateful components

We spreken van een Stateful component als er state wordt bijgehouden in een component. Voorbeeld:

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

Functional vs Class components

Functional components zijn makkelijker te schrijven en hebben minder code nodig. Wanneer je State wilt bijhouden binnen een component was je gedwongen om een Class component te gebruiken. In de nieuwe versie van React kan je gebruik maken van Hooks ( https://reactjs.org/docs/hooks-intro.html ). Hooks bieden een veel kortere en efficientere methode om de oude LifeCycle methods toe te voegen.

Het is over-all veel makkelijker om functional components te schrijven. Ze omvatten bijna altijd minder code en er is weinig reden om er geen gebruik van te maken.

Presentational vs Container components

Een Presentational component accepteert Props van een Container (parent) component en is herbruikbaar omdat er geen koppeling is met de 'behavioural layer'. Alle data en callbacks worden d.m.v. de Props doorgegeven aan dit component. Presentational components kunnen vaak simpele Functional components zijn. Container components hebben minimale DOM markup en styles. Ze zijn wel connected met de Redux Store en dus verantwoordelijk voor het dispatchen van acties naar de Store.

Meer info over de verschillen: Click Here

 

Conclusies

1. Functional components zijn korter om te schrijven en hebben m.u.v. local state en lifecycle methoden geen nadelen, voordelen noch verschillen met class components. Bij de overstap naar TypeScript voor AIR frontend kunnen class components worden omgezet. Het is de tijd niet waard om dit eerder te doen
   • Functional components zijn performance-wise niet sneller / trager dan class components.
2. Er moet meer gebruik gemaakt worden van presentational components, bijvoorbeeld een "Button", "Checkboxes" en "Select/dropdown box" component. Hiermee bereiken we
   • De belangrijkste presentational components moeten worden opgenomen in @rws-air/webcomponents (air-node-packages/webcomponents)
   • Een betere app structuur (Re-used code + Cleaner code)
   • Eenmalig presentational component stylen, daarna hergebruiken.
3. In AIR-Systeem zijn er een aantal Stateful componenten te vinden. Hier is In principe is hier niks mis mee maar we willen eigenlijk zoveel mogelijk state opslaan in de Redux Store behalve als dit niet anders kan. De Stateful Components zijn als volgt:
   1. SearchBox (deprecated, vervangen door filter)
   2. AssetDetailsProcesses
   3. AssetDetailsDocuments
   4. FileTree