Què és ReactJs?

ReactJS és una biblioteca de front-end gratuïta i de codi obert, basada en components, responsable només de la capa de vista de l’aplicació . Aquesta biblioteca de JavaScript serveix per crear interfícies d’usuari basades en components d’IU. Facebook realitza el manteniment. React ha proporcionat facilitat des del seu llançament.

També us pot interessar: “Crea una aplicació CRUD senzilla amb React i Node”

React utilitza un paradigma declaratiu que facilita el raonament de la vostra aplicació i dels objectius per a què siguin eficients i flexibles. Il·lustra vistes senzilles per a cada estat d’una aplicació i React actualitzarà i representarà de manera eficient només el component adequat quan les dades es transformin. La vista declarativa fa que el codi sigui més fàcil de llegir i sense esforç en l’estat de depuració.

Quin és l’objectiu principal d’aquest article?

Aquest article fa llum sobre les properes funcions que estaran disponibles a React-18, les seves aplicacions i altres coses essencials que val la pena entendre.

Quan es tracta de llançar una nova versió d’un llenguatge de programació, els desenvolupadors sovint es troben en pànic. Sempre hi ha por d’actualitzar o desmuntar la configuració existent. En aquest cas, no hauríeu de tenir cap ansietat! La nova versió no comportarà grans canvis. Per tant, no requereix noves habilitats.
L’última versió presenta funcions de millora prèvies en forma de lots automatitzats, noves API (per exemple, startTransition) i un nou renderitzador de servidor de transmissió amb suport integrat per a React.lazy. estarà llançat i llest per rodar per als desenvolupadors.

Representació simultània a React 18

Entre les noves funcions, la concurrència és el canvi principal de l’última versió de React 18. Concurrent defineix la capacitat d’executar diverses tasques alhora. Suposem que un usuari està fent clic o escrivint en un component de React i simultàniament es reprodueix una animació en un component d’un altre component de React. En aquesta situació, l’animació es representa en el context de React mentre l’usuari està escrivint o fent clic als botons. D’altra banda, en les versions anteriors, React estava operant totes aquestes trucades de ganxo, trucades de funcions, etc., simultàniament, i va trigar molt de temps a processar-les. Trobeu més detalls a l’anunci de llançament de React-18 .

Per tant, en un moment donat, l’usuari va tenir la sensació que l’aplicació s’estava proveint. Aquest incident va tenir definitivament un impacte destructiu en els usuaris. Per resoldre aquest problema, els desenvolupadors de React tenen la idea de la representació simultània que proporciona una API de transició per la qual React està guanyant una mica de domini d’aquest bucle d’esdeveniments per a l’usuari.

L’API de transició

Com s’ha esmentat anteriorment, l’API de transició proporciona control sobre la concurrència amb la nova versió de React 18. L’API startTransition permet als desenvolupadors assenyalar quines accions poden bloquejar el fil i provocar un retard a la pantalla. Suposem que un usuari obstrueix una transició; React presentarà el treball de renderització obsolet que no s’ha acabat i només mostrarà la darrera actualització. Permeteu-me donar-vos un exemple ràpid d’utilitzar l’API startTransition a continuació.

import { startTransition } from 'react';
setInputValue(input);
startTransition(() => {
    setSearchQuery(input);
});

Les transicions us permeten controlar la majoria de les interaccions ràpidament, fins i tot si porten a canvis significatius en la interfície d’usuari. També us impedeixen perdre el temps mostrant contingut que ja no és rellevant.

React 18 també presenta un nou ganxo anomenat useTransition. L’ús d’aquest desenvolupador de ganxos pot mostrar un carregador mentre la transició està pendent. Ajuda a indicar a l’usuari que l’aplicació està processant la seva entrada i mostrarà els resultats aviat. Seguiu l’exemple següent.

import { useTransition } from'react';
const [isPending, startTransition] = useTransition();
const callback = () => {
    setInputValue(input);
    startTransition(() => {
       setSearchQuery(input);
  });
}

Dosificació automàtica en reacció

El processament per lots ofereix un millor rendiment computacional. Es produeix quan ReactJS agrupa diverses actualitzacions en un únic estat de renderització. El processament per lots és una cosa que normalment als desenvolupadors no s’ha de preocupar, però és prudent saber què passa darrere de l’escena. Sempre que algú utilitza setState per canviar una variable dins de qualsevol funció, en lloc de fer un render a cada setState, React recull tot setState i després els executa junts. És un lot automàtic. Si us plau, mireu de prop el fragment de codi següent per entendre bé el procés.

import { useState, useLayoutEffect } from "react";
import * as ReactDOM from "react-dom";
function App() {
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(false);
    function handleClick() {
       console.log("=== click ===");
       fetchSomething().then(() => {
           setCount((i) => i + 1);
           setFlag((f) => !f);
       });
    }
    return (
    <div>
    <button onClick={handleClick}>Click and Count</button>
    <h1 style={{ color: flag ? "red" : "green" }}>{count}</h1>
    <LogEvents />
    </div>
 );
}

La nova i les millores a l’API arrel

L’ API arrel funciona com un punter per a les estructures de dades de nivell superior de l’aplicació que React utilitza per seguir un arbre de representació. L’API arrel heretada i ReactDOM.createRoot són les dues noves API que s’introduiran a React 18. L’última API arrel anomenada ReactDOM.createRoot afegirà tots els perfeccionaments a l’aplicació i permetrà característiques del mode concurrent. Permeteu-me que us mostri la diferència entre l’antiga i la nova API arrel a continuació.

Exemple (l’antiga API arrel)

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
ReactDOM.render(<App />, document.getElementById('root'));

Exemple (la nova API arrel)

import ReactDOM from 'react-dom';
import App from 'App';
const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);

API de suspense i renderització del costat del servidor

L’acrònim SSR significa Server-Side-Rendering. És un component que permet als desenvolupadors desenvolupar HTML a partir de components React directament al servidor i compartir l’HTML amb els usuaris. Els usuaris poden presenciar una vista prèvia de la pàgina mitjançant la representació del costat del servidor fins i tot abans de carregar el paquet de javascript. Tanmateix, aquests paquets de JavaScript triguen de vegades més temps de l’habitual a processar el paquet. Aquest període de temps és el temps d’hidratació. L’últim React reduirà el temps d’hidratació. Per tant, permet la transmissió HTML directament a l’SSR. Et preguntes què és el streaming HTML? Ho direm d’aquesta manera: la transmissió d’HTML indica que el servidor pot enviar peces dels vostres components a mesura que es representen. Funciona mitjançant l’ API de Suspense , on seleccionareu quines parts de la vostra aplicació trigaran més a carregar-se i quines s’han de representar a l’instant. Fes una ullada a l’exemple següent.

<Page>
    <Article />
    <Suspense fallback={<Loader />}>
         <Comments />   
    </Suspense></Page>

Col·laboració amb la comunitat

Per a aquesta versió, l’equip de desenvolupadors de React està intentant alguna cosa diferent: han convidat un grup d’experts, desenvolupadors, autors de biblioteques i educadors de tota la comunitat de React a unir-se al seu grup de treball React 18 per fer comentaris, fer preguntes i treballar-hi. el projecte. La missió del grup de treball React 18 és preparar l’ecosistema per a l’adopció progressiva i perfecta de React 18 per les aplicacions i marcs existents. Les discussions del grup de treball es fan a les discussions de GitHub i estan obertes al públic. Els membres del grup de treball de React poden aportar aportacions, fer preguntes i discutir idees. L’equip principal també compartirà els resultats de la investigació en el repo de converses. El bloc oficial de React comunicarà qualsevol informació crítica a mesura que s’acosti la data de llançament estable.

Com començar amb React 18 Alpha avui mateix?

L’etiqueta @alpha s’utilitza per publicar nous alphas a npm regularment. La confirmació més recent al nostre repositori principal s’utilitza per crear aquestes versions. Quan es fusiona una funció o una correcció d’error, es publicarà una versió alfa el dia laborable següent.

Entre les versions alfa, hi podria haver canvis significatius de comportament o d’API. Recordeu que les versions alfa no són per a aplicacions de producció o orientades a l’usuari.

Unimedia Technology

A Unimedia Technology tenim un equip de desenvolupadors web que us poden ajudar a desenvolupar les vostres aplicacions React més complexes.