מֵימָה

Deprecated

ה-API הזה יוסר בגרסה ראשית עתידית של React.

ב-React 18, hydrate הוחלפה ב-hydrateRoot. שימוש ב-hydrate ב-React 18 יציג אזהרה שהאפליקציה שלכם תתנהג כאילו היא רצה על React 17 כאן.

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

hydrate(reactNode, domNode, callback?)

הפניה
- hydrate(reactNode, domNode, callback?)
שימוש

הפניה

`hydrate(reactNode, domNode, callback?)`

ב-React 17 ומטה, קראו ל-hydrate כדי “לחבר” את React ל-HTML קיים רונדר על ידי React בסביבת שרת.

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

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

עוד דוגמאות נוספות.

פרמטרים

reactNode: ‏“React node” ששימש לרינדור ה-HTML הקיים. בדרך כלל זו חתיכת JSX כמו <App /> שרונדרה עם מתודת ReactDOM Server כמו renderToString(<App />) ב-React 17.
domNode: אלמנט DOM שרונדר כ-root element בשרת.
אופציונלי: callback: פונקציה. אם הועברה, React תקרא לה אחרי שהקומפוננטה עוברת הידרציה.

מחזירה

hydrate מחזירה null.

אזהרות

hydrate מצפה שהתוכן המרונדר יהיה זה לתוכן שרונדר בשרת. React יכולה לתקן הבדלים בתוכן טקסט, אבל צריך להתייחס לחוסר התאמות כבאגים ולתקן אותם.
במצב פיתוח, React מציגה אזרות על חוסר התאמות בזמן הידרציה. אין הבטחה שהבדלי תכונות יתוקנו במקרה של חוסר התאמה. זה חשוב לביצועים כי ברוב האפליקציות חוסר תאונות נדיר, זה מתאים מלא של כל ה-markup יהיה יקר מדי.
סביר שתהיה לכם רק קריאת hydrate אחת באפליקציה. אם אתם משתמשים ב-framework, אתם יכולים לבצע את הקריאה הזו בשבילכם.
אם האפליקציה שלכם מרונדרת בלקוח בלבד בלי HTML קיים, שימוש ב-hydrate() לא נתמך. השתמשו ב-render() (עבור React 17 ומטה) או ב-createRoot() (עבור React 18+) במקום.

שימוש

קראו ל-hydrate כדי לחבר קומפונטת React לתוך DOM צומת של דפדפן שרו בשרת.

import { hydrate } from 'react-dom';

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

שימוש ב-hydrate() לרינדור אפליקציית לקוח בלבד (אפליקציה ללא HTML מרונדר שרת) לא נתמך. השתמשו ב-render() (ב-React 17 ומטה) או ב-createRoot() (ב-React 18+) במקום.

ביצוע הידרציה ל-HTML מרונדר שרת

ב-React, “hydration” הוא האופן שבו React “מתחברת” ל-HTML קיים רונדר על ידי React בסביבת שרת. בזמן הידרציה, React תנסה לחבר מאזיני אירועים ל-markup הקיים ולקחת שליטה על רינדור האפליקציה בצד הלקוח.

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

Fork

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

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

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

למידע נוסף על הידרציה, ראו את התיעוד של hydrateRoot.

השתקת אזהרות hydratation dismatch בלתי נמנעות

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

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

Fork

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

זה עובד לעומק של רמה אחת בלבד, ומיועד כ-escape hatch. אל תשתמשו בזה מעבר לנדרש. אלא אם מדובר בתוכן טקסט, 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

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

PreviousfindDOMNode

Nextpreconnect