{"id":7189,"date":"2022-03-06T08:28:05","date_gmt":"2022-03-06T07:28:05","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/react-18-features-whats-new-in-the-box\/"},"modified":"2024-01-09T18:20:09","modified_gmt":"2024-01-09T17:20:09","slug":"react-18-features-whats-new-in-the-box","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/","title":{"rendered":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa?"},"content":{"rendered":"\n
<\/figure>\n\n

Qu\u00e8 \u00e9s ReactJs?<\/h2>\n\n

ReactJS \u00e9s una biblioteca de front-end gratu\u00efta i de codi obert, basada en components, responsable nom\u00e9s de la capa de vista de l’aplicaci\u00f3<\/a> . Aquesta biblioteca de JavaScript serveix per crear interf\u00edcies d’usuari basades en components d’IU. Facebook realitza el manteniment. React ha proporcionat facilitat des del seu llan\u00e7ament. <\/p>\n\n

Tamb\u00e9 us pot interessar: “Crea una aplicaci\u00f3 CRUD senzilla amb React i Node”<\/a><\/p>\n\n

React utilitza un paradigma declaratiu que facilita el raonament de la vostra aplicaci\u00f3 i dels objectius per a qu\u00e8 siguin eficients i flexibles. Il\u00b7lustra vistes senzilles per a cada estat d’una aplicaci\u00f3 i React actualitzar\u00e0 i representar\u00e0 de manera eficient nom\u00e9s el component adequat quan les dades es transformin. La vista declarativa fa que el codi sigui m\u00e9s f\u00e0cil de llegir i sense esfor\u00e7 en l’estat de depuraci\u00f3.<\/p>\n\n

<\/p>\n\n

Quin \u00e9s l’objectiu principal d’aquest article?<\/h2>\n\n

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. <\/p>\n\n

Quan es tracta de llan\u00e7ar una nova versi\u00f3 d’un llenguatge de programaci\u00f3, els desenvolupadors<\/a> sovint es troben en p\u00e0nic. Sempre hi ha por d’actualitzar o desmuntar la configuraci\u00f3 existent. En aquest cas, no haur\u00edeu de tenir cap ansietat! La nova versi\u00f3 no comportar\u00e0 grans canvis. Per tant, no requereix noves habilitats.L’\u00faltima versi\u00f3 presenta funcions de millora pr\u00e8vies en forma de lots automatitzats, noves API (per exemple, startTransition) i un nou renderitzador de servidor de transmissi\u00f3 amb suport integrat per a React.lazy. estar\u00e0 llan\u00e7at i llest per rodar per als desenvolupadors.<\/p>\n\n

<\/p>\n\n

Representaci\u00f3 simult\u00e0nia a React 18<\/h3>\n\n

Entre les noves funcions, la concurr\u00e8ncia \u00e9s el canvi principal de l’\u00faltima versi\u00f3 de React 18. Concurrent defineix la capacitat d’executar diverses tasques alhora. Suposem que un usuari est\u00e0 fent clic o escrivint en un component de React i simult\u00e0niament es reprodueix una animaci\u00f3 en un component d’un altre component de React. En aquesta situaci\u00f3, l’animaci\u00f3 es representa en el context de React mentre l’usuari est\u00e0 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\u00e0niament, i va trigar molt de temps a processar-les. Trobeu m\u00e9s detalls a l’anunci de llan\u00e7ament de React-18<\/a> .<\/p>\n\n

Per tant, en un moment donat, l’usuari va tenir la sensaci\u00f3 que l’aplicaci\u00f3 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\u00f3 simult\u00e0nia<\/strong> que proporciona una API de transici\u00f3 per la qual React est\u00e0 guanyant una mica de domini d’aquest bucle d’esdeveniments per a l’usuari.<\/p>\n\n

<\/p>\n\n

L’API de transici\u00f3<\/h3>\n\n

Com s’ha esmentat anteriorment, l’API de transici\u00f3 proporciona control sobre la concurr\u00e8ncia amb la nova versi\u00f3 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\u00f3; React presentar\u00e0 el treball de renderitzaci\u00f3 obsolet que no s’ha acabat i nom\u00e9s mostrar\u00e0 la darrera actualitzaci\u00f3. Permeteu-me donar-vos un exemple r\u00e0pid d’utilitzar l’API startTransition a continuaci\u00f3.<\/p>\n\n

import { startTransition } from 'react';\nsetInputValue(input);\nstartTransition(() => {\n    setSearchQuery(input);\n});<\/code><\/pre>\n\n
Les transicions us permeten controlar la majoria de les interaccions r\u00e0pidament, fins i tot si porten a canvis significatius en la interf\u00edcie d’usuari. Tamb\u00e9 us impedeixen perdre el temps mostrant contingut que ja no \u00e9s rellevant.<\/p>\n\n
React 18 tamb\u00e9 presenta un nou ganxo anomenat useTransition. L’\u00fas d’aquest desenvolupador de ganxos pot mostrar un carregador mentre la transici\u00f3 est\u00e0 pendent. Ajuda a indicar a l’usuari que l’aplicaci\u00f3 est\u00e0 processant la seva entrada i mostrar\u00e0 els resultats aviat. Seguiu l’exemple seg\u00fcent.<\/p>\n\n
import { useTransition } from'react';\nconst [isPending, startTransition] = useTransition();\nconst callback = () => {\n    setInputValue(input);\n    startTransition(() => {\n       setSearchQuery(input);\n  });\n}<\/code><\/pre>\n\n
<\/p>\n\n
Dosificaci\u00f3 autom\u00e0tica en reacci\u00f3<\/h3>\n\n
El processament per lots ofereix un millor rendiment computacional. Es produeix quan ReactJS agrupa diverses actualitzacions en un \u00fanic estat de renderitzaci\u00f3. El processament per lots \u00e9s una cosa que normalment als desenvolupadors no s’ha de preocupar, per\u00f2 \u00e9s prudent saber qu\u00e8 passa darrere de l’escena. Sempre que alg\u00fa utilitza setState per canviar una variable dins de qualsevol funci\u00f3, en lloc de fer un render a cada setState, React recull tot setState i despr\u00e9s els executa junts. \u00c9s un lot autom\u00e0tic. Si us plau, mireu de prop el fragment de codi seg\u00fcent per entendre b\u00e9 el proc\u00e9s.<\/p>\n\n
import { useState, useLayoutEffect } from \"react\";\nimport * as ReactDOM from \"react-dom\";\nfunction App() {\n    const [count, setCount] = useState(0);\n    const [flag, setFlag] = useState(false);\n    function handleClick() {\n       console.log(\"=== click ===\");\n       fetchSomething().then(() => {\n           setCount((i) => i + 1);\n           setFlag((f) => !f);\n       });\n    }\n    return (\n    <div>\n    <button onClick={handleClick}>Click and Count<\/button>\n    <h1 style={{ color: flag ? \"red\" : \"green\" }}>{count}<\/h1>\n    <LogEvents \/>\n    <\/div>\n );\n}<\/code><\/pre>\n\n
<\/p>\n\n
La nova i les millores a l’API arrel<\/h3>\n\n
L’ API arrel<\/strong><\/a> funciona com un punter per a les estructures de dades de nivell superior de l’aplicaci\u00f3 que React utilitza per seguir un arbre de representaci\u00f3. L’API arrel heretada i ReactDOM.createRoot s\u00f3n les dues noves API que s’introduiran a React 18. L’\u00faltima API arrel anomenada ReactDOM.createRoot afegir\u00e0 tots els perfeccionaments a l’aplicaci\u00f3 i permetr\u00e0 caracter\u00edstiques del mode concurrent. Permeteu-me que us mostri la difer\u00e8ncia entre l’antiga i la nova API arrel a continuaci\u00f3.<\/p>\n\n
Exemple (l’antiga API arrel)<\/strong><\/h4>\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from 'App';\nReactDOM.render(<App \/>, document.getElementById('root'));<\/code><\/pre>\n\n
<\/p>\n\n
Exemple (la nova API arrel)<\/strong><\/h4>\n\n
import ReactDOM from 'react-dom';\nimport App from 'App';\nconst root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App \/>);<\/code><\/pre>\n\n
<\/p>\n\n
API de suspense i renderitzaci\u00f3 del costat del servidor<\/h2>\n\n
L’acr\u00f2nim SSR significa Server-Side-Rendering. \u00c9s 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\u00e8via de la p\u00e0gina mitjan\u00e7ant la representaci\u00f3 del costat del servidor fins i tot abans de carregar el paquet de javascript. Tanmateix, aquests paquets de JavaScript triguen de vegades m\u00e9s temps de l’habitual a processar el paquet. Aquest per\u00edode de temps \u00e9s el temps d’hidrataci\u00f3. L’\u00faltim React reduir\u00e0 el temps d’hidrataci\u00f3. Per tant, permet la transmissi\u00f3 HTML directament a l’SSR. Et preguntes qu\u00e8 \u00e9s el streaming HTML? Ho direm d’aquesta manera: la transmissi\u00f3 d’HTML indica que el servidor pot enviar peces dels vostres components a mesura que es representen. Funciona mitjan\u00e7ant l’ API de Suspense<\/a><\/strong> , on seleccionareu quines parts de la vostra aplicaci\u00f3 trigaran m\u00e9s a carregar-se i quines s’han de representar a l’instant. Fes una ullada a l’exemple seg\u00fcent.<\/p>\n\n
<Page>\n    <Article \/>\n    <Suspense fallback={<Loader \/>}>\n         <Comments \/>   \n    <\/Suspense><\/Page><\/code><\/pre>\n\n
<\/p>\n\n
Col\u00b7laboraci\u00f3 amb la comunitat<\/h2>\n\n
Per a aquesta versi\u00f3, l’equip de desenvolupadors de React est\u00e0 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\u00f3 del grup de treball React 18 \u00e9s preparar l’ecosistema per a l’adopci\u00f3 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\u00fablic. Els membres del grup de treball de React poden aportar aportacions, fer preguntes i discutir idees. L’equip principal tamb\u00e9 compartir\u00e0 els resultats de la investigaci\u00f3 en el repo de converses. El bloc oficial de React comunicar\u00e0 qualsevol informaci\u00f3 cr\u00edtica a mesura que s’acosti la data de llan\u00e7ament estable.<\/p>\n\n
Com comen\u00e7ar amb React 18 Alpha avui mateix?<\/h2>\n\n
L’etiqueta @alpha s’utilitza per publicar nous alphas a npm regularment. La confirmaci\u00f3 m\u00e9s recent al nostre repositori principal s’utilitza per crear aquestes versions. Quan es fusiona una funci\u00f3 o una correcci\u00f3 d’error, es publicar\u00e0 una versi\u00f3 alfa el dia laborable seg\u00fcent.<\/p>\n\n
Entre les versions alfa, hi podria haver canvis significatius de comportament o d’API. Recordeu que les versions alfa no s\u00f3n per a aplicacions de producci\u00f3 o orientades a l’usuari.<\/p>\n\n
<\/p>\n\n
Unimedia Technology<\/h2>\n\n
A Unimedia Technology<\/a> tenim un equip de desenvolupadors web<\/strong> que us poden ajudar a desenvolupar les vostres aplicacions React m\u00e9s complexes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rect 18 noves funcions<\/p>\n","protected":false},"author":6,"featured_media":6719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[218],"tags":[],"class_list":["post-7189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-guides-ca"],"acf":[],"yoast_head":"\nFuncions de React 18: qu\u00e8 hi ha de nou a la caixa? - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa?\" \/>\n<meta property=\"og:description\" content=\"Rect 18 noves funcions\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-06T07:28:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T17:20:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa? - Unimedia Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/","og_locale":"ca_ES","og_type":"article","og_title":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa?","og_description":"Rect 18 noves funcions","og_url":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2022-03-06T07:28:05+00:00","article_modified_time":"2024-01-09T17:20:09+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Escrit per":"Unimedia","Temps estimat de lectura":"7 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa?","datePublished":"2022-03-06T07:28:05+00:00","dateModified":"2024-01-09T17:20:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/"},"wordCount":1311,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png","articleSection":["Technical Guides"],"inLanguage":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/","url":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/","name":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa? - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png","datePublished":"2022-03-06T07:28:05+00:00","dateModified":"2024-01-09T17:20:09+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react18-e1646738995593-4.png","width":700,"height":400,"caption":"React 18"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/ca\/react-18-features-whats-new-in-the-box\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Funcions de React 18: qu\u00e8 hi ha de nou a la caixa?"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7189"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6719"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}