React v18.0が出た?!(1)

v18.適用0

Resactライブラリのインストールはこれまでと同じです.
npm使用時

npm install react react-dom 

糸を使用する場合

yarn add react react-dom

逆に,最初のJSXコードのindexを受け入れる.jsの表現方式が変化した.
従来の方法に比べて

// Before
import { render } from 'react-dom';
const container = document.getElementById('root');
render(<App />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

既存のリアクターでは、最初のパラメータがrender()で、最初のパラメータが一番上の要素で、2番目のパラメータがレンダリングされるDOM領域が指定されています.
React v18.0 createRootでレンダリングするDOMを指定します.
root.render()と同じ方法で表示する必要があります.
React v18.0を使用して以前の方法でレンダリングすると、エラーが発生します.新しい方法を熟知して適用してみてください.

新しい機能

では、react 18にどのような機能が追加されているのか、どのような点に注意する必要があるのかを理解してみましょう.

同時応答

REACT 18の新機能の大部分は同期レンダリングを中心に構成されている.同時レンダリングは選択ですが、反応チームは、反応アプリケーションの設計方法に大きく影響すると考えています.
同時反応とは?
同時性自体は機能ではありません.逆に、内部で発生するメカニズムを通じて、Reactは同時に私たちのUIのために複数のバージョンを用意することができます.
ロック解除機能
ロック解除機能があるため、同期性が重要です.Reactでは,cueueの優先度やマルチバッファなどの高度な技術を用いて内部実装を行う.しかし、これらの機能を担当するAPIは秘密に公開されない.
Reactチームの考えによれば、開発者はユーザー体験の向上に注目するだけで、これらの体験を処理する過程はReactが担当するため、内部で同期性がどのように働いているかを知る必要はありません.
反応チームは、これらの技術が内部でどのように働いているのかを人に知られたくないようだ.いずれにしても、これまでにない最新技術であり、核心的な部分がある可能性があります.
Concurrent React
レンダリング中に中断すると、エラーが発生します.ただし、同時にレンダリングしても更新レンダリングを開始できます.中間は一時停止し、後でレンダリングします.に対する境界温度ノードが作成できません.
重要なのは、レンダリングを停止してもUIの一貫性を確保できることです.大規模なレンダリング操作においても、UIはすぐにユーザ入力に応答し、より高いユーザ体験を得ることができる.
さいようかのうじょうたい
同時レンダリングでは、一部の構成部品を画面から削除し、以前の状態値を使用して再アクティブ化できます.Reactチームは、将来の小型パッチに<OffScreen/>という新しいコンポーネントを追加し、バックグラウンドで新しいUIを準備できると述べた.これにより、UIを表示する前に、ユーザーが事前に準備することができます.

整理する

同期レンダリングはReactの強力な新機能であり、サスペンス、トランジション、ストリーミングサーバレンダリングを含む多くの新機能がこの機能を利用して構築されています.
反応隊はv 180の新技術では,反応開発のレイアウトを変えることができる.また、この同期レンダリングは開始されるだけで、他の技術も紹介されています.
今後、UIやUXに影響を与える技術が追加されることを期待しています.