hydrateRoot

hydrateRoot מאפשר לך להציג רכיבי React בתוך צומת DOM של דפדפן שתוכן ה-HTML שלו נוצר בעבר על ידי react-dom/server.

const root = hydrateRoot(domNode, reactNode, options?)

הפניה
שימוש

הפניה

`hydrateRoot(domNode, reactNode, options?)`

התקשר ל-hydrateRoot כדי “לצרף” את React ל-HTML קיים שכבר בוצע על-ידי React בסביבת שרת.

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

const domNode = document.getElementById('root');
const root = hydrateRoot(domNode, reactNode);

React יתחבר ל-HTML שקיים בתוך ה-domNode, וישתלט על ניהול ה-DOM שבתוכו. לאפליקציה הבנויה במלואה עם React תהיה בדרך כלל רק קריאה אחת hydrateRoot עם רכיב השורש שלה.

ראה דוגמאות נוספות למטה.

פרמטרים

domNode: אלמנט DOM שעובד כאלמנט השורש בשרת.
reactNode: הצומת “React” used לעיבוד ה-HTML הקיים. זה בדרך כלל יהיה חלק של JSX כמו <App /> שעובד בשיטה ReactDOM Server כמו renderToPipeableStream(<App />).
אופציונלי options: אובייקט עם אפשרויות עבור שורש React זה.
אופציונלי onRecoverableError: התקשרות חוזרת נקראת כאשר React מתאושש אוטומטית משגיאות.
- אופציונלי identifierPrefix: קידומת מחרוזת React uses עבור מזהים שנוצרו על ידי useId. שימושי כדי למנוע התנגשויות בעת שימוש במספר שורשים באותו עמוד. חייבת להיות אותה קידומת כמו used בשרת.

מחזירה

hydrateRoot מחזיר אובייקט בשתי שיטות: render ו-unmount.

אזהרות

hydrateRoot() מצפה שהתוכן המעובד יהיה זהה לתוכן המעובד. עליך להתייחס לאי התאמה כאל באגים ולתקן אותם.
במצב פיתוח, React מזהיר על אי התאמה במהלך הידרציה. אין ערובה לכך שההבדלים בתכונות יתוקנו במקרה של אי התאמה. זה חשוב מסיבות ביצועים מכיוון שuse ברוב האפליקציות, אי התאמה הן נדירות, ולכן אימות כל הסימון יהיה יקר מאוד.
סביר להניח שתהיה לך רק שיחת hydrateRoot אחת באפליקציה שלך. אם אתה use מסגרת, היא עשויה לעשות את הקריאה הזו עבורך.
אם האפליקציה שלך מעובדת ללא עיבוד של HTML כבר, השימוש ב-hydrateRoot() אינו נתמך. השתמש ב-createRoot() במקום זאת.

`root.render(reactNode)`

התקשר ל-root.render כדי לעדכן רכיב React בתוך שורש React hydrated עבור אלמנט דפדפן DOM.

root.render(<App />);

React יעדכן את <App /> ב-root המשתלח.

ראה דוגמאות נוספות למטה.

פרמטרים

reactNode: צומת “React” שברצונך לעדכן. זה בדרך כלל יהיה חלק של JSX כמו <App />, אבל אתה יכול גם להעביר אלמנט React שנבנה עם createElement(), מחרוזת, מספר, null, או undefined.

מחזירה

root.render מחזירה undefined.

אזהרות

אם אתה קורא ל-root.render לפני שהשורש סיים את הלחות, React ינקה את תוכן ה-HTML הקיים של השרת ויעביר את השורש כולו לעיבוד לקוח.

`root.unmount()`

התקשר ל-root.unmount כדי להרוס עץ שעבר עיבוד בתוך שורש React.

root.unmount();

אפליקציה שנבנתה במלואה עם React בדרך כלל לא תבצע שיחות אל root.unmount.

זה בעיקר useמלא אם הצומת DOM של השורש React שלך (או כל אחד מאבותיו) עלול להיות מוסר מה-DOM על ידי קוד אחר. לדוגמה, דמיינו חלונית לשונית jQuery שמסירת כרטיסיות לא פעילות מה-DOM. אם כרטיסייה תוסר, כל מה שבתוכה (כולל שורשי React בפנים) יוסר גם מה-DOM. עליך לומר ל-React “להפסיק” לנהל את תוכן השורש שהוסר על-ידי קריאה ל-root.unmount. אחרת, הרכיבים בתוך השורש שהוסר לא יתנקו ויפנו משאבים כמו מנויים.

קריאה ל-root.unmount תבטל את הטעינה של כל הרכיבים בשורש ו”תנתק” את React מהצומת השורש DOM, כולל הסרת מטפלי אירועים או state בעץ.

פרמטרים

root.unmount אינו מקבל פרמטרים כלשהם.

מחזירה

root.unmount מחזירה undefined.

אזהרות

קריאה ל-root.unmount תבטל את כל הרכיבים בעץ ו”תנתק” את React מהצומת השורש DOM.
ברגע שאתה קורא ל-root.unmount, אינך יכול לקרוא שוב ל-root.render בשורש. ניסיון להתקשר ל-root.render על שורש לא מותקן יגרום לשגיאה “לא ניתן לעדכן שורש לא מותקן”.

שימוש

עיבוד לחות בשרת HTML

אם ה-HTML של האפליקציה שלך נוצר על ידי react-dom/server, אתה צריך להטמין אותו בלקוח.

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

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

פעולה זו תייבש את השרת HTML בתוך צומת הדפדפן DOM עם React רכיב עבור האפליקציה שלך. בדרך כלל, תעשה זאת פעם אחת בעת ההפעלה. אם אתה use מסגרת, היא עשויה לעשות זאת מאחורי הקלעים עבורך.

כדי לייבש את האפליקציה שלך, React “יצרף” את ההיגיון של הרכיבים שלך ל-HTML הראשוני שנוצר מהשרת. הידרציה הופכת את תמונת המצב הראשונית HTML מהשרת לאפליקציה אינטראקטיבית מלאה שפועלת בדפדפן.

Fork

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

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

לא צריך להתקשר שוב ל-hydrateRoot או להתקשר אליו במקומות נוספים. מנקודה זו ואילך, React ינהל את ה-DOM של האפליקציה שלך. כדי לעדכן את ממשק המשתמש, הרכיבים שלך יהיו use state במקום זאת.

Pitfall

העץ React שאתה מעביר ל-hydrateRoot צריך לייצר אותו פלט כפי שהוא עשה בשרת.

זה חשוב לחוויית user. ה-user יבלה זמן מה בהסתכלות על ה-HTML שנוצר על ידי השרת לפני שקוד ה-JavaScript שלך ייטען. עיבוד שרת יוצר אשליה שהאפליקציה נטענת מהר יותר על ידי הצגת תמונת המצב HTML של הפלט שלה. פתאום הצגת תוכן שונה שובר את האשליה הזו. זו הסיבה שפלט העיבוד של השרת חייב להתאים לפלט העיבוד הראשוני בלקוח.

ה-causes הנפוצים ביותר המובילים לשגיאות הידרציה כוללים:

רווח לבן נוסף (כמו שורות חדשות) סביב React שנוצר HTML בתוך צומת השורש.
שימוש בבדיקות כמו typeof window !== 'undefined' בלוגיקת העיבוד שלך.
שימוש ב-APIs לדפדפן בלבד כמו window.matchMedia בלוגיקת העיבוד שלך.
עיבוד נתונים שונים בשרת ובלקוח.

React מתאושש מכמה שגיאות הידרציה, אבל עליך לתקן אותן כמו באגים אחרים. במקרה הטוב, הן יובילו להאטה; במקרה הגרוע ביותר, מטפלי אירועים יכולים להיקשר לאלמנטים הלא נכונים.

לחות של מסמך שלם

אפליקציות שנבנו במלואן עם React יכולות להציג את המסמך כולו כ-JSX, כולל התג <html>:

function App() {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="/styles.css"></link>
        <title>My app</title>
      </head>
      <body>
        <Router />
      </body>
    </html>
  );
}

כדי לייבש את המסמך כולו, העבר את ה-document גלובלי כארגומנט הראשון ל-hydrateRoot:

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

hydrateRoot(document, <App />);

דיכוי שגיאות אי התאמה של הידרציה בלתי נמנעת

אם התכונה או תוכן הטקסט של רכיב בודד שונים באופן בלתי נמנע בין השרת ללקוח (לדוגמה, חותמת זמן), אתה עשוי להשתיק את אזהרת אי התאמה של הידרציה.

כדי להשתיק אזהרות הידרציה על אלמנט, הוסף את suppressHydrationWarning={true}:

Fork

export default function App() {
  return (
    <h1 suppressHydrationWarning={true}>
      Current Date: {new Date().toLocaleDateString()}
    </h1>
  );
}

זה עובד רק ברמה אחת בעומק, והוא נועד להיות פתח מילוט. אל תגזים use. אלא אם כן מדובר בתוכן טקסט, React עדיין לא ינסה לתקן אותו, כך שהוא עשוי להישאר לא עקבי עד לעדכונים עתידיים.

טיפול בתוכן לקוח ושרת שונה

אם אתה צריך בכוונה לרנדר משהו שונה בשרת ובלקוח, אתה יכול לעשות רינדור שני מעברים. רכיבים שמציגים משהו שונה בלקוח יכולים לקרוא משתנה state כמו isClient, אותו ניתן להגדיר ל-true ב-Effect:

Fork

import { useState, useEffect } from "react";

export default function App() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <h1>
      {isClient ? 'Is Client' : 'Is Server'}
    </h1>
  );
}

בדרך זו העברת העיבוד הראשונית תציג את אותו תוכן כמו השרת, ימנע אי התאמה, אך מעבר נוסף יתרחש באופן סינכרוני מיד לאחר הידרציה.

Pitfall

גישה זו הופכת את ההידרציה לאטית יותר מכיוון שהרכיבים שלך צריכים לרנדר פעמיים. שים לב לחוויית user בחיבורים איטיים. הקוד JavaScript עשוי להיטען מאוחר משמעותית מהעיבוד הראשוני של HTML, כך שעיבוד ממשק משתמש אחר מיד לאחר הידרציה עשוי להרגיש צורם גם ל-user.

עדכון רכיב שורש עם לחות

לאחר שהשורש סיים לחות, אתה יכול לקרוא ל-root.render כדי לעדכן את רכיב השורש React. בניגוד ל-createRoot, אתה בדרך כלל לא צריך לעשות זאת מכיוון שuse התוכן הראשוני כבר הוצג כ-HTML.

אם אתה קורא ל-root.render בשלב מסוים לאחר הידרציה, ומבנה עץ הרכיב תואם למה שעובד קודם לכן, React ישמור את ה-state.](/learn/preserving-and-resetting-state) שימו לב כיצד תוכלו להקליד את הקלט, מה שאומר שהעדכונים חוזרים מ-TK_ בדוגמה זו אינם חוזרים על כל __1. הרסני:

Fork

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

const root = hydrateRoot(
  document.getElementById('root'),
  <App counter={0} />
);

let i = 0;
setInterval(() => {
  root.render(<App counter={i} />);
  i++;
}, 1000);

זה נדיר לקרוא ל-root.render על שורש hydrated. בדרך כלל, אתה תעדכן state בתוך אחד הרכיבים במקום זאת.

PreviouscreateRoot

NextServer APIs