Ist das eine gute Praxis für reaktive funktionelle Komponenten?

Kürzlich habe ich mehr und mehr meiner reagierenden Komponenten in einem funktionalen Stil geschrieben, da die meisten von ihnen die Lebenszyklusfunktionen oder den Zustand nicht benötigen. Innerhalb meiner Komponenten (die wiederum nur Funktionen sind) definiere ich Hilfsfunktionen - onClick-Funktionen und all diesen Jazz. Aber jetzt denke ich, ob das eine gute Übung ist? Da die Funktion für jedes Rendern aufgerufen wird, erstellt sie alle internen Funktionen neu? Ich bin neugierig, Gedächtnisverlust und ob ich das falsch mache .... Ein Beispiel für eine Komponente:Ist das eine gute Praxis für reaktive funktionelle Komponenten?

import React from 'react'; 
import { connect } from 'react-redux'; 

import ProductSearch from '../Plan/components/ProductSearch'; 

const BlockedProducts = (props) => { 
    const onSelectProduct = (product_key) => { 
    console.log(product_key); 
    }; 

    return (
    <ProductSearch onSelectProduct={ onSelectProduct } /> 
); 
}; 

export default connect()(BlockedProducts);

Quelle

2016-11-09 user1595077

-1

Ja, es wird auf jeden Fall ein paar Leistung auf Grund der Tatsache getroffen, dass du bist Deklaration einer Funktion jedes Mal, wenn Sie rendern BlockedProducts. Wie effizient das von der Müllsammlung gereinigt wird, weiß ich nicht, aber es scheint am besten, nicht Ihr Glück zu drücken.

Funktionelle Komponenten in React sind wirklich komplett staatenlos und nichts "tun", außer Präsentation. Die ideale Funktionskomponente gibt nur JSX/HTML zum Rendern zurück, kein Schnickschnack. Meiner Meinung nach sollte eine funktionale Komponente NUR eine Rendite haben, und sobald Sie anfangen, interne Funktionen hinzuzufügen, sollte sie zu einer vollwertigen React-Klasse aufgerüstet werden.

Quelle

2016-11-09 10:17:03 jered

Es ist nichts falsch mit einer funktionalen Komponente, die andere Funktionen verwendet oder statusfreie Event-Handler an seine untergeordneten Elemente/Komponenten anfügt. Nur wenn Sie Status- oder Lebenszyklus-Hooks benötigen, sollten Sie auf eine Stateful-Komponente aktualisieren. – naomik

Sie können die onSelectProduct Deklaration von BlockedProducts Scope verschieben, indem Sie es oberhalb der Komponente platzieren. Es schließt den Geltungsbereich der Komponente ab, da die BlockedProducts Deklaration mit onSelectProduct im gleichen Bereich liegt.

Ich glaube nicht, dass es einige Perf Probleme verursachen wird. Ich stimme @jered zu - eine zustandslose Komponente sollte so einfach wie möglich sein, also versuchen Sie, keine Geschäftslogik dort zu machen.

Quelle

2016-11-09 10:51:15

Ich bin in letzter Zeit zu der gleichen Frage gekommen. https://github.com/yannickcr/eslint-plugin-react/issues/357 Daniel erläutert, dass dieser Ansatz die GC-Arbeitslast erhöht, sodass er stattdessen Klassenkomponenten verwendet.

Ich würde argumentieren, dass vor allem Klassenkomponenten sind für die Handhabung von Lebenszyklus und Zustand und sie haben auch Auswirkungen auf die Leistung durch die Erstellung von Backbohnen, die sich mit Lebenszyklen und Zustand beschäftigen.

Deshalb würde ich stattdessen Funktionsklasse verwenden und Klasse-Komponenten erstellen, wenn echte Performance-Probleme

Btw entstehen, 10 Monate vergangen sind, ich bin gespannt, die Sie nähern haben mit endlich klebten?

Quelle

2017-10-04 06:43:34

Ist das eine gute Praxis für reaktive funktionelle Komponenten?

Antwort

Verwandte Themen