React - optymalizacja komponentu ;) -usuwanie deklaracji z render ()

0

Przeczytałam właśnie artykuł o optymalizacji Reacta. Jeden z punktów mówił, że w render należy unikać deklaracji, jednak nie pisał jak to obejść. I tu rodzi się pytanie.

Mam w render

const row = 'd-flex flex-column flex-sm-row align-items-center justify-content-center p-2'
  const column = 'd-flex flex-column w-100 '
  const arrayOfSearchFieldNames = [...sourceArrayOfSearchFieldNames];
  const arrayOfPlaceholders = [...sourcePlaceholders];
  const inputFieldStyle ='d-inline m-2 p-1 border rounded';
  const SubmitButtonClass = 'btn btn-outline-success m-2 px-5 shadowTextNorm';// prawdopodobnie klasa shadowtextNorm nie istnieje
  const ResetFieldsClass = 'btn btn-outline-warning m-2 px-5' ;
  const areButtonsHidden = (this.state.authors === '' && this.state.title === '' && this.state.subject === ''  );

coś takiego. Jest to wyizolowane z jednej przyczyny - klarowność w return. Komponent jest raczej regularnie modyfikowany. Z artykułu wynikało, że każda inicjalizacja to dodatkowy czas, stąd pytanie jak najlepiej do tego podejść. Jedna prawie oczywista rzecz to zrobienie z tego obiektu - wtenczas będzie to inicjalizowane jeden raz na jeden re-render. Jednak chciałabym też zapytać czy czegoś takiego jak taki wynikowy obiekt nie można zainicjalizować w konstruktorze - wówczas byłoby to jeden raz na cykl życia. Ewentualnie jakieś inne pomysły?

0

Masz problemy z wydajnością Twojego komponentu czy też może optymalizujesz "bo tak"?

0

Zdecydowanie bo tak, a właściwie dlatego, że przeczytałam, że takich deklaracji należy unikać. Za cienka jestem na dobre zmierzenie wydajności.

0

I dlatego, że jeżeli kiedyś zobaczy to rekruter to może się czepnąć. A może i nie ale chcę ograniczyć ryzyko wyłożenia się na czymś czego można uniknąć.

1

W konstruktorze bez żadnego dodatkowego obiektu do mnie przemawia najbardziej.

0
neves napisał(a):

W konstruktorze bez żadnego dodatkowego obiektu do mnie przemawia najbardziej.

No właśnie moje gdybania też szły w kierunku konstruktora. Pytanie, dlaczego nie chciałbyś tego zagregować do jednego obiektu?

1

Jaką wartość ma wnieść ten dodatkowy obiekt? Jak masz w klasie jakieś pola które by nie wchodziły w skład "wynikowego obiektu" to wtedy ten wynikowy obiekt wprowadziłby fizyczny podział, innych zalet nie widzę.

1

Wstawianie zbędnych deklaracji czy funkcji w render(), zbędnych w tym sensie, że można je zadeklarować wcześniej jest złą praktyką, a to z tego prostego powodu, że te deklaracje lub funkcje będą się inicjalizować wielokrotnie przy każdym przerysowywaniu komponentu. Oczywiście w wielu przypadkach to nie będzie miało znaczącego wpływu na wydajność oraz przede wszystkim kod nadal będzie działać. Z tego też powodu nie jest to błąd, tylko zła praktyka.

0

A idąc dalej. Skoro w konstruktorze, to pytanie czy jest sens dopisywać stałe (takie jak style) do stanu czy zostawić je jako "zwykłe" zmienne? Ja bym zostawiła jako zwykłe, ale a. mają wpływ na to co jest wyświetlane be. stan miał niby być SSOT. Więc zostawienie ich jako zwykłych byłoby trochę wbrew temu, z drugiej strony będą one całkowicie statyczne więc może szkoda tym stan zaśmiecać?

1

Ponownie zgadzam się z Twoim tokiem rozumowania, skoro coś jest stałe to nie jet stanem.

0

Idę dalej z tematem usuwania deklaracji z render(). Poniżej kilka deklaracji które pomyślnie (tzn wszystko działa ) dały się przenieść do konstruktora.
Pytanie czy to w jakiś sposób nie narusza innych reguł? Pierwsza deklaracja to również w gruncie rzeczy stała.
Pozostałe jakby nie patrzeć to już konkretniejsze funkcje odczytujące /ale nie modyfikujace stan albo propsy.



const SubmitButton = ()=>{return(<Icon onClick ={this.handleSubmitButton} >&#xe901;</Icon>)}
const DisplayErrorMessage =()=>{return this.state.inputError? (<ButtonWithMessage styled ={'button_problem'} content= {this.errorMessage} clickHandler ={this.handleResetStateAndClear} />):null}
const BackArrow =()=>{return( <span onClick={this.properties.handleArrowBackClick} className={this.properties.currentPageNumber!==1? 'pagenumbers--current':null} > &lt;back </span>)}
const ForthArrow =()=>{return( <span onClick={this.properties.handleArrowNextClick}className={this.properties.currentPageNumber!==this.properties.numberOfPages ? 'pagenumbers--current':null} >next&gt;</span>)}

1 użytkowników online, w tym zalogowanych: 0, gości: 1