ホームページ >ウェブフロントエンド >jsチュートリアル >React の新機能、それが重要な理由、および移行のヒント

React の新機能、それが重要な理由、および移行のヒント

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-19 19:39:09680ブラウズ

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

また行きます — React の新機能についての別の投稿です。しかし、正直に言って、これはそれだけの価値があります。 React 19 は、2024 年 4 月にリリースされた リリース候補 (RC) から、強力なアップデートが満載された安定版リリースに正式に移行しました。 React 19 は、パフォーマンスの向上から新しいフックやツールに至るまで、小規模なアプリの構築でもエンタープライズ グレードのソリューションの構築でも、あらゆる人に何かを提供します。

プロジェクトをシームレスにアップグレードするのに役立つコード例と移行のヒントを使用して、新機能を詳しく見ていきましょう。

React 19 の新機能

1.パフォーマンスの最適化

React 19 の導入内容:

  • 選択的なハイドレーションの強化: 必要に応じて UI の一部のみをハイドレーションすることで、サーバーでレンダリングされるアプリのハイドレーションを最適化します。
  • バンドル サイズの縮小: React 19 のライブラリは軽量であるため、ロード時間が短縮され、ネットワーク使用量が削減されます。

例: 効率的な水分補給

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

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

2.新しいフックと強化されたフック

a. useFormStatus: 簡素化されたフォーム状態管理

新しい useFormStatus フックを使用すると、フォームの管理が簡単になります。カスタム コンテキストやプロパティのドリルを必要とせずに、フォームの保留状態を追跡します。

import { useFormStatus } from 'react-dom';

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

b. useDeferredValue:initialValue オプション

更新された useDeferredValue フックにより、遅延データの処理中に初期フォールバック値をレンダリングすることで、UI の移行がよりスムーズになります。

import { useDeferredValue } from 'react';

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

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

c. useOptimistic: オプティミスティックな更新を処理します

新しい useOptimistic フックにより、楽観的な UI 更新が簡単になります。

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.ドキュメントメタデータホイスティング

React 19 は、 のようなメタデータを自動的にホイストします。 <メタ>ドキュメントの </p> タグに追加します。セクション。<br> <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.改善された参照</strong> </h3> <ul> <li> <strong>Refs as Props</strong>: refs を props として関数コンポーネントに直接渡すことができるようになりました。</li> <li> <strong>Ref クリーンアップ関数</strong>: useEffect と同様に、ref のクリーンアップ ロジックを定義できます。 </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.デバッグと同時レンダリング</strong> </h3> <ul> <li>React DevTools のエラー ログが改善されました。</li> <li> <strong>自動バッチ処理</strong> や <strong>トランジション</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>移行のヒント</strong> </h2> <p>ほとんどのプロジェクトでは React 19 へのアップグレードは簡単ですが、スムーズに移行するためのヒントをいくつか紹介します。</p> <h3> <strong>1.依存関係を更新します</strong> </h3> <p>React と React DOM を最新バージョンに更新してください:<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.非推奨の機能を確認する</strong> </h3> <p>React 19 では、いくつかのレガシー API が削除されました。非推奨の機能の詳細については、React 19 の変更ログを確認してください。</p> <h3> <strong>3.同時機能をテストします</strong> </h3> <p>プロジェクトでサーバー側レンダリングまたは同時機能を使用する場合は、アプリを徹底的にテストして、React 19 の最適化との互換性を確認してください。</p> <h3> <strong>4.新しいフックを段階的に使用する</strong> </h3> <p>useFormStatus や useOptimistic などの新しいフックを広く展開する前に、アプリの独立した部分で導入を開始してください。</p> <h3> <strong>5.メタデータ処理の更新</strong> </h3> <p>メタデータ管理にサードパーティのライブラリを利用している場合は、React 19 のメタデータホイスティングがセットアップでどのように機能するかをテストしてください。不要な依存関係を削除することでコードベースを簡素化できる場合があります。</p> <h3> <strong>6.デバッグと開発</strong> </h3> <p>更新された React DevTools をデバッグに活用します。ハイドレーションまたはレンダリング中にエラーが発生した場合、React 19 はより詳細なログを提供し、問題をより迅速に解決するのに役立ちます。</p> <h3> <strong>7.同時レンダリングの準備をする</strong> </h3> <p>コンポーネントが同時レンダリングを正しく処理していることを確認してください。例:</p> <ul> <li>同期レンダリング動作に依存しないでください。</li> <li>予期しない動作を防ぐために、遷移内で状態の更新をテストします。</li> </ul> <h2> <strong>React 19 が重要な理由</strong> </h2> <p>React 19 は単なるアップデートではありません。これは、パフォーマンス、開発者エクスペリエンス、最新の UI 開発における飛躍的な進歩です。新しいフック、メタデータ管理の改善、同時レンダリングの機能強化など、このリリースにより、開発者はより優れたアプリをより迅速に構築できるようになります。</p> <h2> <strong>最終的な感想</strong> </h2> <p>React 19 にアップグレードする準備はできましたか?軽量なフットプリント、強力な機能、改良された開発者ツールにより、最新の React アプリケーションにとって簡単なものになっています。上記の移行ヒントを使用してスムーズな移行を確保し、React 19 の新機能の探索を開始してください。</p> <p>詳細については、React 19 の公式ブログ投稿をご覧ください。お気に入りの新機能と、React 19 によって開発ワークフローがどのように改善されたかをお知らせください。コーディングを楽しんでください! ?</p> <p>以上がReact の新機能、それが重要な理由、および移行のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</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>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="再描画のために HTML5 キャンバスを効率的にクリアするにはどうすればよいですか?" href="https://m.php.cn/ja/faq/1796727314.html">再描画のために HTML5 キャンバスを効率的にクリアするにはどうすればよいですか?</a></span><span>次の記事:<a class="dBlack" title="再描画のために HTML5 キャンバスを効率的にクリアするにはどうすればよいですか?" href="https://m.php.cn/ja/faq/1796727338.html">再描画のために HTML5 キャンバスを効率的にクリアするにはどうすればよいですか?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</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/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</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>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/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>