Categorii
Programare

Limita flexibilității JSX în React

Această limită constă în funcții anonime care autoapelează și execută un bloc întreg de instrucțiuni (sau mai multe incorporate în el).

<div>
  {((y) => {
    const x = 5 + 5 + y;
    return x;
  })(10)}
</div>

În interiorul funcției de mai sus, funcție care primește un parametru y cu valoarea 10 și returnează valoarea finală 5 + 5 + 10, poate fi pusă orice structură logică JavaScript. Această bucată de cod afișează textul „20” (fără ghilimele) în interiorul unui <div>.

Acest fel de funcție se numește IIFE (https://developer.mozilla.org/en-US/docs/Glossary/IIFE).

Dacă în schimb punem {5+5+z} unde z este o variabilă declarată cu var, este posibil să se afișeze doar ultima valoare a lui z în caz că al nostru cod este, de exemplu, într-un ciclu for cu contorul z . Problema nu apare când se folosește let în loc de var . Mai multe informații găsiți aici: https://developer.mozilla.org/en-US/docs/Glossary/IIFE#for_loop_with_var_before_es6 .

{(() => {
  const a = [];
  for (var i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează mereu 5
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

Corectat, codul arată astfel:

{(() => {
  const a = [];
  for (let i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează numerele de la 0 inclusiv la 4 inclusiv
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

În fine, astfel de expresii pot fi folosite și în interiorul valorii unui prop:

<div
  style={{
    fontSize: ((y) => {
      const x = 5 + 5 + y;
      return x;
    })(1)
  }}
>
  Micul meu div
</div>

Cutie de nisip cu cod: https://codesandbox.io/s/hungry-breeze-qlyi6?file=/src/App.tsx .

Dacă aveți întrebări sau feedback, nu ezitați să scrieți în comentarii mai jos. Toate gândurile bune!

Categorii
Programare

Ce face hook-ul useCallback și de ce este foarte bun uneori

Pe scurt, este vorba de optimizarea aplicației React.

Pentru cei care nu știu ce este React, React este un cadru de lucru pe aplicații web. Dacă aveți întrebări despre React, vă răspund în limita timpului disponibil.

Revin:

  1. useCallback nu este pentru ca funcția (primită ca parametru de către useCallback) să nu fie recreată. Ea este recreată. Din câte știu nu s-a inventat procesarea unei funcții în stil leneș (s-ar numi lazily defined functions? nu cred că ar fi folositoare o astfel de facilitate)
  2. useCallback este pentru când referința unui gestionar de eveniment (sau altă funcție) trebuie să fie constantă (de-a lungul mai multor randări), de exemplu:
<Button onClick={myCallback}>Click me</Button>

Acest cod rerandează instanța componentei Button la fiecare schimbare a referinței myCallback. Dacă myCallback este realizat cu useCallback, el este mai eficient.

Este în discuție referința care ajunge la codul de randare. Schimbarea ei duce la rerandare care posibil nu este destul de eficientă în multe cazuri.

Excepția este când componenta, care mai sus se numește Button, conține și o funcție componentShouldUpdate din ciclul de viață al componentelor React ce specifică de exemplu proprietăți la a lor modificare să nu producă rerandare.

Cunoașteți o alternativă pentru componentShouldUpdate în cazul componentelor React de tip funcție?


Aveți întrebări sau sugestii sau vorbe bune? Vă rog să le scrieți în comentarii.

Categorii
Programare

Ce să faci când starea inițială a store-ului Redux nu este configurată în SSR bine?

Cel mai probabil este o problemă foarte mică. Voi vorbi despre ea mai jos.

Când hydrate nu funcționează împreună cu SSR astfel încât apelurile la dispatch făcute la montarea componentelor nu sunt executate deloc pe client, chiar dacă la apăsarea unor link-uri din aplicație unele sunt, atunci încearcă să rezolvi erorile din consola DevTools cu nepotriviri între HTML-ul realizat prin SSR și cel de pe client. Această verificare este valabilă doar în mediu de development, nu și de producție, deci nu afectează performanța aplicației. hydrate doar asociază ascultătorii de evenimente la componentele primite în HTML-ul din SSR, spre deosebire de render.