ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリである React は、新しいリリースがリリースされるたびに進化し続けています。このブログ投稿では、React 18 と次期 React 19 (現在リリース候補段階) の主な違いを調査し、新機能の例を示し、React with Vite を使用する開発者向けの移行ヒントを提供します。
React 18 では、自動バッチ処理、同時レンダリング用の新しい API、トランジションなどの重要な変更が導入されました。 React 19 はまだ開発中ですが、これらの基盤の上にさらなる改善と新機能を組み込むことを目指しています。
2024 年 9 月の時点で、React 19 はリリース候補 (RC) 段階にあります。機能は完備されており、テストの準備ができていますが、運用環境での使用はまだ推奨されていません。機能と API は最終リリースまでに変更される可能性があります。
該当する場合は例と React 18 との比較を示しながら、React 19 で期待される主な改善点と新機能について詳しく見ていきましょう。
React 19 は、ストリーミング SSR をさらに最適化することを目的としています。 API は React 18 と同様のままですが、パフォーマンスの向上は顕著であるはずです。
例 (React 18 と 19 の両方で同様):
// server.js
import { renderToPipeableStream } from 'react-dom/server';
app.get('/', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/client.js'],
onShellReady() {
res.statusCode = 200;
res.setHeader('Content-type', 'text/html');
pipe(res);
},
});
});
React 19 は、React 18 で導入された選択的水和を改善すると期待されています。
React 19 の例 (構文は React 18 に似ていますが、動作が改善されています):
import { Suspense } from 'react';
function App() {
return (
<Suspense fallback={<Loading />}>
<MainContent />
<Suspense fallback={<SidebarLoading />}>
<Sidebar />
</Suspense>
</Suspense>
);
}
この例では、React 19 はサイドバーの読み込み中に MainContent コンポーネントを優先して、よりスムーズなハイドレーションを提供する可能性があります。
React 19 には、サーバー コンポーネントのより安定した実装が含まれる予定です。
React 19 のサーバー コンポーネントの例:
// Note: This syntax is speculative and may change
'use server';
import { db } from './database';
async function UserProfile({ userId }) {
const user = await db.user.findUnique({ where: { id: userId } });
return <div>{user.name}</div>;
}
export default UserProfile;
この例では、UserProfile コンポーネントがサーバー上で実行され、機密情報をクライアントに公開することなくデータベースに直接アクセスできます。
React 19 では、フォールバック処理が改善されてサスペンス コンポーネントが強化されています。
React 18 の例:
function ProfilePage({ userId }) {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails userId={userId} />
<Suspense fallback={<h2>Loading posts...</h2>}>
<ProfileTimeline userId={userId} />
</Suspense>
</Suspense>
);
}
React 19 の潜在的な改善 (推測):
function ProfilePage({ userId }) {
return (
<Suspense
fallback={<h1>Loading profile...</h1>}
primaryContent={<ProfileDetails userId={userId} />}
>
<ProfileTimeline userId={userId} />
</Suspense>
);
}
この推測的な React 19 の例では、primaryContent プロパティを使用して、開発者が読み込み中にどのコンテンツを優先するかを指定できる可能性があります。
React 18 では、setState とフックの自動バッチ処理が導入されました。 React 19 では、これをさらに多くのシナリオに拡張する可能性があります。
React 18 の例:
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setCount(c => c + 1); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return <button onClick={handleClick}>{count}</button>;
}
React 19 では、このバッチ処理がさらに多くのシナリオに拡張される可能性があり、非同期操作が含まれる可能性があります。
React 19 では、レンダリングの優先順位をより詳細に制御できるようになる可能性があります。
潜在的な React 19 の例 (推測):
import { useDeferredValue, startTransition } from 'react';
function SearchResults({ query }) {
const deferredQuery = useDeferredValue(query);
return (
<>
<div>Searching for: {query}</div>
<Suspense fallback={<Spinner />}>
<Results query={deferredQuery} />
</Suspense>
</>
);
}
function handleSearch(input) {
startTransition(() => {
setSearchQuery(input);
});
}
この例では、React 19 は、ユーザー入力に応じて UI のさまざまな部分がどのように更新されるかをより詳細に制御できる可能性があります。
React 19 では、古いクロージャの問題を解決するために useEvent フックが導入される予定です。
React 18 の問題:
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');
function handleSend() {
// This might use a stale `roomId` if the component re-renders
sendMessage(roomId, message);
}
return <button onClick={handleSend}>Send</button>;
}
useEvent を使用した潜在的な React 19 ソリューション:
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');
const handleSend = useEvent(() => {
// This will always use the current `roomId`
sendMessage(roomId, message);
});
return <button onClick={handleSend}>Send</button>;
}
React 19 には、パフォーマンスの問題に対処するための Context API の改善が含まれる可能性があります。
React 18 の例:
const ThemeContext = React.createContext('light');
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Header />
<Main />
<Footer />
</ThemeContext.Provider>
);
}
React 19 の潜在的な改善 (推測):
const ThemeContext = React.createContext('light', (prev, next) => prev === next);
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Header />
<Main />
<Footer />
</ThemeContext.Provider>
);
}
この推測的な例では、不必要な再レンダリングを防ぐためにコンテキストに比較関数が含まれている可能性があります。
多くのパフォーマンスの最適化は内部で行われますが、一部は開発者に見える場合があります:
React 19 は調整プロセスを最適化することが期待されています。これにはコードを変更する必要はないかもしれませんが、複雑な UI の更新が速くなる可能性があります。
React 19 may include optimizations to reduce memory usage. Again, this might not require code changes but could improve performance, especially for large applications.
React 19 might improve tree shaking capabilities. This could result in smaller bundle sizes when using build tools like Vite.
Example vite.config.js that might better leverage React 19's tree shaking:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
}
})
To experiment with the React 19 Release Candidate using Vite:
npm create vite@latest my-react-19-rc-app -- --template react
cd my-react-19-rc-app
npm install react@rc react-dom@rc
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
esbuild: {
jsxInject: `import React from 'react'`
},
optimizeDeps: {
include: ['react', 'react-dom']
}
})
npm run dev
Remember, using the RC version in production is not recommended.
While React 19 is still in the Release Candidate stage, it promises exciting improvements and new features. From enhanced server-side rendering to new hooks and performance optimizations, there's much to explore in React 19.
As the release date approaches, stay tuned to the official React documentation and community resources for the most up-to-date information. By staying informed and gradually adopting new features as they become stable, you'll be well-positioned to leverage the improvements in React 19 for your projects.
以上がReact と React (RC): 主な違いと移行のヒントと例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
