Decorators in JavaScript/React worden gebruikt om bepaalde eigenschappen of methodes aan te passen zonder de definitie van de gedeelte te veranderen. Het is een experientiële functie in javascript die vaak gebruikt in veel library’s en frameworks.
Het is van belang om op te merken dat decorators nog niet opgenomen zijn in de officiële JavaScript- of React-specificatie. Ze zijn een voorgesteld kenmerk voor ECMAScript, de specificatie waarop JavaScript is gebaseerd. Daarom hebben ze niet standaard ondersteuning in alle omgevingen en u moet extra stappen ondernemen om ze in te stellen.
Echter, ze kunnen zeer handig zijn voor zaken als code opschonen, logica abstraheren of functionaliteiten toevoegen.
Hier is een basis voorbeeld van een decorator:
```
function log(target, name, descriptor) {
var original = descriptor.value;
if (typeof original === ‘function’) {
descriptor.value = function(…args) {
console.log(`Arguments: ${args}`);
try {
const result = original.apply(this, args);
console.log(`Result: ${result}`);
return result;
} catch (e) {
console.log(`Error: ${e}`);
throw e;
}
}
}
return descriptor;
}
class Math {
@log
add(a, b) {
return a + b;
}
}
```
Bovenstaande `log` decorator gaat elk aspect van de werking van de “add” methode registreren: de argumenten, het resultaat, en eventuele fouten. Een decorator wordt geschreven als een functie die een target, naam en descriptor ontvangt en de descriptor aanpast.
React decorators kunnen worden aangebracht op React Component klassen.
Om decorators in uw eigen project te gebruiken, moet u de juiste Babel-plugin (babel-plugin-transform-decorators) installeren en uw `.babelrc`-configuratiebestand bijwerken.
```
npm install —save-dev babel-plugin-transform-decorators
```
Daarna moet je het aan je `.babelrc` toevoegen:
```
{
“plugins”: [“transform-decorators”]
}
```
Als u een create-react-app project gebruikt, moet u react-scripts ejecten om toegang te krijgen tot de babel-configuratie.
Let op: Hoewel decorators een krachtig hulpmiddel kunnen zijn, moeten ze spaarzaam worden gebruikt. Overmatig gebruik van decorators kan uw code moeilijk leesbaar maken.
