該週報主要為各個地方內容的匯總整理
技術#
What Even Are React Server Components#
React サーバーコンポーネントは、サーバー上でレンダリングされる React コンポーネントであり、ネットワークのウォーターフォールを減らし、高速な構築とメンテナンスが容易なユーザーエクスペリエンスを作成することを目的としています。これにより、クライアントに送信される JavaScript の量が減少し、ネストすることができ、必要なリクエストの数が減少します。サーバーコンポーネントは通常の React コンポーネントのように見えますが、サーバーで正常に動作するために追加のインストゥルメントが必要です。すべての React の問題を解決するわけではありませんが、より大きく複雑なアプリケーションにのみ適用されます。
How to measure page loading time with Performance API#
この記事では、パフォーマンス API を使用してページの読み込み時間を測定する方法と、JavaScript の実装例を提供しています。著者はまた、開発者が時間を節約するための "page-loaded-in" という名前の NPM パッケージも作成しました。Web ベースのプロジェクトを開発する際には、パフォーマンスを優先することが非常に重要であり、ユーザーにシームレスで効率的なエクスペリエンスを提供するために必要です。
React reconciliation: how it works and why should we care#
この記事では、React のコンポーネントのレンダリングプロセスにおける謎について議論しています。条件付きレンダリングされるコンポーネントでは、再レンダリングごとに自身がアンマウントされて再度マウントされることがあり、内部の状態が失われる可能性があります。ただし、複数のコンポーネントが同じ条件付きレンダリングを使用している場合、React は新しいものをアンマウントして再度マウントするのではなく、元のコンポーネントを再レンダリングします。これは、React の調和アルゴリズムによるものであり、DOM を効率的に更新するために既存の要素を変更することを目的としています。この記事では、アルゴリズムの動作や React 開発への影響について詳しく説明しています。
工具#
will-this-react-global-state-work-in-concurrent-rendering#
React の並列レンダリングでレンダリングの中断と状態の分岐をテストします
react-lifecycle-visualizer#
React のレンダリングを視覚化し、完全なログトラッキングを行います
recharts#
React と D3 を使用して構築された新しいチャートライブラリ
オプションを一つの大きなオプションに渡すのではなく、コンポーネントを分割するスタイルが好きです
neon#
Node.js アプリケーションやライブラリに Rust を埋め込むためのライブラリとツールチェーン
Chat2DB#
阿里巴巴がオープンソースで提供する無料のマルチデータベースクライアントツールで、Windows や Mac でのローカルインストール、サーバーサイドのデプロイ、Web ブラウザでのアクセスをサポートしています。
更新#
View Transitions API#
ビュートランジション API は、異なる DOM ステート間のアニメーショントランジションを簡単に作成し、単一のステップで DOM コンテンツを更新するメカニズムを提供します。
https://github.com/vuejs/vitepress/pull/2347/files
Chrome でテーマを切り替えるとき
https://deploy-preview-2347--vitepress-docs.netlify.app/