reactjs / reactjs/react.dev

Setting the record straight on hydration

未關閉
#3,016 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
11.8k
分支
7.9k
平均合併
1 天 11 小時
30 天內合併 PR
11

描述

Anything I google related to react and hydration has the following blog post come up written by a prominent Google employee: https://addyosmani.com/blog/rehydration/

It shows the DOM being entirely destroyed and recreated as pictured below. The hydrate docs are a bit unclear about what exactly happens during hydration. They start out by saying that hydrate "is used to hydrate a container", but never explicitly define hydration. And so we must rely on blogs such as the one linked above to explain what hydration in more detail. After hours of digging through inaccurate information I'm pretty sure the above blog is terribly misleading.

If I'm right that Addy's image is incorrect, perhaps someone from Facebook could use their network to reach out and get this image corrected to reflect that the DOM is not destroyed? Otherwise, it would be helpful for React to have its own docs that explain hydration in more depth. The docs describe to some degree what happens during hydration, but not exactly why and leave a lot of ambiguity. E.g. why does hydration "patch up differences in text content" and why would such differences exist in the first place?

hydrate@2x

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

先閱讀連結的 React hydrate 文件和所引用的 hydration 文章,然後比較它們對 DOM 重用和文字不匹配的描述。更新 React 文件,明確定義 hydration、解釋其用途,並說明文字內容差異的原因;修訂後的指南應解決此處提出的歧義。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, react
領域
documentation
Issue 類型
文件
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。