Rumah >hujung hadapan web >tutorial js >React What's New, Mengapa Ia Penting, dan Petua Migrasi

React What's New, Mengapa Ia Penting, dan Petua Migrasi

Patricia Arquette
Patricia Arquetteasal
2024-12-19 19:39:09719semak imbas

React  What’s New, Why It Matters, and Migration Tips

Inilah kita sekali lagi—siaran lain tentang ciri baharu dalam React ?. Tetapi secara jujur, yang ini berbaloi. React 19 secara rasmi telah beralih daripada Release Candidate (RC), yang dilancarkan pada April 2024, kepada keluaran stabilnya, padat dengan kemas kini yang hebat! Daripada peningkatan prestasi kepada cangkuk dan alatan baharu, React 19 menawarkan sesuatu untuk semua orang, sama ada membina apl kecil atau penyelesaian gred perusahaan.

Mari kita mendalami perkara baharu, dengan contoh kod dan petua migrasi untuk membantu anda meningkatkan projek anda dengan lancar.

Apa yang Baharu dalam React 19

1. Pengoptimuman Prestasi

React 19 memperkenalkan:

  • Peningkatan Penghidratan Terpilih: Mengoptimumkan penghidratan untuk apl yang diberikan pelayan dengan hanya menghidratkan bahagian UI seperti yang diperlukan.
  • Saiz Himpunan Lebih Kecil: Pustaka React 19 lebih ringan, membawa kepada masa pemuatan yang lebih cepat dan penggunaan rangkaian yang berkurangan.

Contoh: Penghidratan yang Cekap

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
hydrateRoot(container, <App />);

2. Cangkuk Baharu dan Dipertingkat

a. useFormStatus: Pengurusan Negeri Borang Ringkas

Borang lebih mudah diurus dengan cangkuk useFormStatus baharu. Ia menjejaki keadaan belum selesai borang tanpa memerlukan konteks tersuai atau penggerudian prop.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

b. useDeferredValue: Pilihan InitialValue

Kait useDeferredValue yang dikemas kini memastikan peralihan UI yang lebih lancar dengan memberikan nilai sandaran awal semasa memproses data tertunda.

import { useDeferredValue } from 'react';

function Search({ deferredValue }) {
  const value = useDeferredValue(deferredValue, '');

  return <Results query={value} />;
}

c. useOptimistic: Mengendalikan Kemas Kini Optimis

Kait useOptimistic baharu menjadikan kemas kini UI optimistik menjadi mudah.

import { useOptimistic } from 'react';

function LikeButton() {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(0);

  function handleLike() {
    setOptimisticLikes(prev => prev + 1);
    fetch('/api/like', { method: 'POST' });
  }

  return <button onClick={handleLike}>Likes: {optimisticLikes}</button>;
}

3. Pengangkatan Metadata Dokumen

React 19 secara automatik mengangkat metadata seperti dan <meta> tag pada <kepala> dokumen bahagian.<br> </p> <pre class="brush:php;toolbar:false">import { hydrateRoot } from 'react-dom/client'; import App from './App'; const container = document.getElementById('root'); hydrateRoot(container, <App />); </pre> <h3> <strong>4. Rujukan yang Diperbaiki</strong> </h3> <ul> <li> <strong>Rujuk sebagai Props</strong>: Anda kini boleh menghantar rujukan sebagai prop terus kepada komponen fungsi.</li> <li> <strong>Fungsi Pembersihan Ref</strong>: Sama seperti useEffect, anda boleh mentakrifkan logik pembersihan untuk rujukan. </li> </ul> <pre class="brush:php;toolbar:false">import { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus(); return <button type="submit" disabled={pending}>Submit</button>; } </pre> <h3> <strong>5. Penyahpepijatan dan Paparan Serentak</strong> </h3> <ul> <li>Log ralat yang dipertingkatkan dalam React DevTools.</li> <li>Sokongan yang lebih baik untuk pemaparan serentak dengan ciri seperti <strong>pengumpulan automatik</strong> dan <strong>peralihan</strong>. </li> </ul> <pre class="brush:php;toolbar:false">import { useDeferredValue } from 'react'; function Search({ deferredValue }) { const value = useDeferredValue(deferredValue, ''); return <Results query={value} />; } </pre> <h2> <strong>Petua Penghijrahan</strong> </h2> <p>Naik taraf kepada React 19 sepatutnya mudah untuk kebanyakan projek, tetapi berikut ialah beberapa petua untuk memastikan peralihan yang lancar:</p> <h3> <strong>1. Kemas kini Tanggungan Anda</strong> </h3> <p>Pastikan untuk mengemas kini React dan React DOM kepada versi terkini:<br> </p> <pre class="brush:php;toolbar:false">import { useOptimistic } from 'react'; function LikeButton() { const [optimisticLikes, setOptimisticLikes] = useOptimistic(0); function handleLike() { setOptimisticLikes(prev => prev + 1); fetch('/api/like', { method: 'POST' }); } return <button onClick={handleLike}>Likes: {optimisticLikes}</button>; } </pre> <h3> <strong>2. Semak untuk Ciri Dihentikan</strong> </h3> <p>React 19 telah mengalih keluar beberapa API lama. Semak log perubahan React 19 untuk mendapatkan butiran tentang ciri yang ditamatkan.</p> <h3> <strong>3. Uji Ciri Serentak</strong> </h3> <p>Jika projek anda menggunakan pemaparan sebelah pelayan atau ciri serentak, uji apl anda dengan teliti untuk memastikan keserasian dengan pengoptimuman React 19.</p> <h3> <strong>4. Gunakan Cangkuk Baharu Secara Bertambah</strong> </h3> <p>Mula menggunakan cangkuk baharu seperti useFormStatus atau useOptimistic di bahagian terpencil apl anda sebelum melancarkannya secara meluas.</p> <h3> <strong>5. Kemas kini Pengendalian Metadata</strong> </h3> <p>Jika anda bergantung pada pustaka pihak ketiga untuk pengurusan metadata, uji cara pengangkatan metadata React 19 berfungsi dengan persediaan anda. Anda mungkin boleh memudahkan pangkalan kod anda dengan mengalih keluar kebergantungan yang tidak perlu.</p> <h3> <strong>6. Penyahpepijatan dan Pembangunan</strong> </h3> <p>Manfaatkan React DevTools yang dikemas kini untuk penyahpepijatan. Jika ralat berlaku semasa penghidratan atau pemaparan, React 19 menyediakan log yang lebih terperinci untuk membantu anda menyelesaikan isu dengan lebih cepat.</p> <h3> <strong>7. Bersedia untuk Rendering Serentak</strong> </h3> <p>Pastikan komponen anda mengendalikan pemaparan serentak dengan betul. Contohnya:</p> <ul> <li>Elakkan bergantung pada gelagat pemaparan segerak.</li> <li>Uji kemas kini keadaan dalam peralihan untuk mengelakkan tingkah laku yang tidak dijangka.</li> </ul> <h2> <strong>Kenapa React 19 Penting</strong> </h2> <p>React 19 bukan sekadar kemas kini; ia merupakan satu lonjakan ke hadapan dalam prestasi, pengalaman pembangun dan pembangunan UI moden. Sama ada cangkuk baharu, pengurusan metadata yang lebih baik atau peningkatan pemaparan serentak, keluaran ini melengkapkan pembangun untuk membina apl yang lebih baik dengan lebih pantas.</p> <h2> <strong>Pemikiran Akhir</strong> </h2> <p>Bersedia untuk menaik taraf kepada React 19? Jejaknya yang lebih ringan, ciri yang berkuasa dan perkakas pembangun yang dipertingkat menjadikannya tidak perlu untuk aplikasi React moden. Gunakan petua migrasi di atas untuk memastikan peralihan yang lancar dan mula meneroka keupayaan baharu React 19.</p> <p>Untuk butiran lanjut, lihat catatan blog React 19 rasmi. Beritahu kami ciri baharu kegemaran anda dan cara React 19 telah meningkatkan aliran kerja pembangunan anda. Selamat mengekod! ?</p> <p>Atas ialah kandungan terperinci React What's New, Mengapa Ia Penting, dan Petua Migrasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">define</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">Error</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">ui</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan:</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya:<a class="dBlack" title="Bagaimanakah Saya Mengosongkan Kanvas HTML5 dengan Cekap untuk Melukis Semula?" href="https://m.php.cn/ms/faq/1796727314.html">Bagaimanakah Saya Mengosongkan Kanvas HTML5 dengan Cekap untuk Melukis Semula?</a></span><span>Artikel seterusnya:<a class="dBlack" title="Bagaimanakah Saya Mengosongkan Kanvas HTML5 dengan Cekap untuk Melukis Semula?" href="https://m.php.cn/ms/faq/1796727338.html">Bagaimanakah Saya Mengosongkan Kanvas HTML5 dengan Cekap untuk Melukis Semula?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/1609.html" title="Analisis mendalam bagi komponen kumpulan senarai Bootstrap" class="aBlack">Analisis mendalam bagi komponen kumpulan senarai Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1640.html" title="Penjelasan terperinci tentang fungsi JavaScript kari" class="aBlack">Penjelasan terperinci tentang fungsi JavaScript kari</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1949.html" title="Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)" class="aBlack">Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/2248.html" title="Angularjs menyepadukan UI WeChat (weui)" class="aBlack">Angularjs menyepadukan UI WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/2351.html" title="Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional" class="aBlack">Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>