| まず、React のフロントエンドとバックエンドの同型性、および React のファースト スクリーン レンダリングの概念を説明します。次に、これら 2 つの概念を使用して、サーバー側のレンダリングが完了した後にブラウザ側でレンダリングが繰り返される問題を解決します。 |
フロントエンドとバックエンドの同型性とは何ですか?
特定の問題 (SEO、レンダリング速度の向上など) を解決するために、React はサーバー側で HTML テキスト形式の文字列を生成する 2 つのメソッドを提供します。この HTML 形式の文字列を取得した後、通常はページに組み立てられ、ユーザーのブラウザに直接返されます。
この時点でサーバー側の作業は完了し、次はブラウザ側の作業になります。
ブラウザは HTML テキストを取得すると、すぐにコンテンツをレンダリングしてユーザーに表示します。次に、ページに必要な .js ファイルをロードし、JavaScript script を実行して、react コンポーネントの初期化を開始します。
ここで問題が発生します。 React はコンポーネントを初期化した後、コンポーネント内のすべての render() メソッドを実行し、仮想 DOM のツリー構造を生成し、適切なタイミングで仮想 DOM をブラウザの実際の DOM に書き込みます。 React は常に仮想 DOM に基づいて実際の DOM を生成するため、最終的にはサーバー側でレンダリングされたすべての HTML を置き換えることになります。
上記のことは問題ではなく、ユーザーがページを見たときの「フラッシュ」にすぎません。問題ではありますが、本当に問題であり、ユーザーエクスペリエンスの観点から、この製品はさまざまな場面で半月にわたってあなたと戦います。疲れたら、サーバー側のレンダリングをオフにするだけで、オペレーションは SEO の問題についてあなたとの戦いを始める準備をします。
Facebook のような賢いエンジニアはこれらの問題を確実に考え、ReactDOMServer.renderToString(element) メソッドにチェックサム メカニズムを提供しました。
チェックサム公式サイトについてはあまり紹介されていませんが、国内外の様々なブログでたくさん紹介されています。 React 開発者からこのメカニズムの紹介を探していますが、見つかりませんでした...
フロントエンドとバックエンド間の同型性により、フロントエンドとバックエンドの DOM 構造の一貫性が保証され、レンダリングが繰り返されなくなります。 React は保護のためにチェックサム メカニズムを使用します。
React の最初の画面レンダリングとは何ですか?
簡単に言うと、react によってブラウザのメモリ内に初めて生成される仮想 DOM ツリーです。これはブラウザの dom ではなく、仮想 dom であることに注意してください。
React を知っている人は、すべての React コンポーネントに render() メソッドがあることを知っているはずです (コンポーネントが関数を使用して記述されている場合、関数内のすべてのコードが render() メソッドに詰め込まれます)。 ReactDOM.render(element,container,[callback]) メソッドが実行されると、次の手順が実行されます。
1. すべてのコンポーネントが最初に初期化されます (es6 がコンストラクターを実行します)。
2. すべてのコンポーネントの render() メソッドが 1 回呼び出され、この処理が完了すると仮想的な dom ツリーが取得されます。
3. React は仮想 dom をブラウザ dom に変換します。完了後、コンポーネントのコンポーネント DidMount() メソッドを呼び出して、コンポーネントがブラウザにロードされたことを通知します。
上記の処理で、ステップ 2 が完了すると、react の最初の画面描画が完了します。チェックサム機構と組み合わせると、ステップ 3 が実行されない場合があります。
コンポーネントの状態が変化するとき (setState() ライフサイクル関数が呼び出される)、または親コンポーネントがレンダリングされるとき (親コンポーネントの render() メソッドが呼び出される)、現在のコンポーネントの render() メソッドが実行されます。仮想 DOM の変更が発生しますが、これらの変更は最初の画面のレンダリングとは何の関係もありません。
React フロントエンドとバックエンドの同形の最初の画面レンダリング
同型性と最初の画面のレンダリングを理解すると、最初の画面の非反復レンダリングの問題を解決する方法を簡単に理解できます。
まず、サーバー側のレンダリングが完了すると、ルート要素の属性にチェックサム値が書き込まれます。
このチェックサムは、サーバーによって生成された HTML コンテンツのハッシュに基づいて計算されます。
次に、ブラウザーがすべての js ファイルをロードした後、レンダリングを初期化するために前に紹介した ReactDOM.render(element,container, [callback]) の 3 つのステップの実行を開始します。仮想 dom を生成する 2 番目のステップを実行した後、react は同じアルゴリズムを使用して仮想 dom に基づいてハッシュ値を計算し、チェックサムと一致する場合、サーバーはレンダリングと 3 番目のステップを完了したとみなされます。実行されません。
チェックサム比較が不一致の場合、開発環境およびテスト環境のブラウザコンソールに以下の警告内容が出力されます。
実稼働環境では警告は出力されません。
同型レンダリングの内容は非常に多くありますが、その原理は実際には非常に単純で、DOM の一貫性を確保することに他なりません。ただし、コード スライス、非同期読み込み、サーバー側のデバッグ インターフェイスなどの機能を組み合わせてデータを非同期に組み立てた後、サーバーとブラウザーによって初めてレンダリングされる DOM の一貫性を確保するには多大な労力がかかります。しかし、原則が明確になれば、いつでも実行できるようになります。