Was sind die Vorteile von "Stateless Function Components" gegenüber "ES6 Class Components"?

Question

Ich lese oft, dass ich 'Stateless Function Components' verwenden sollte, wenn möglich, aber meistens ohne irgendeine Erklärung warum. Was sind die Vorteile?

Answer 1

Erstens werden zustandslose Funktionskomponenten schneller gerendert, da es in der React-Rendering-Pipeline einen optimierten Kurzpfad dafür gibt.

Zweitens ist der Code viel sauberer, da Sie weniger tippen und es gibt fast kein visuelles Rauschen. Wenn Sie moderne JS verwenden, natürlich. Check it out, ich definiere einen „custom tag“:

const MyFancyDiv = ({ children, ...otherProps }) => (
    <div { ...otherProps } className='i-am-fancy-wrapper'> 
     { children } 
    </div> 
); 

Für alles, was nicht einen Zustand, den Kontext hat, oder benutzerdefinierte Lifecycle Methoden, dies ist der bevorzugte Weg.

Und es ist eigentlich die Funktion von React, die es sehr schwierig für andere Rahmen zu schlagen ist. Verwenden Sie es, wenn Sie können.