我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

继续reactSSR话题,讲完了react脱水的两个函数,renderToString()renderToPipeableStream()。现在来讲讲注水函数hydrateRoot()。这个函数本身用起来是非常的简单,就是连带的事情比较麻烦。

苏南大叔:React SSR,如何理解和使用注水函数hydrateRoot()? - hydrateRoot
React SSR,如何理解和使用注水函数hydrateRoot()?(图2-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程心得体会。本文测试环境:nodejs@20.18.0create-react-app@5.0.1react-router-dom@6.27.0react@18.3.1。官方把这个行为称之为“注水”,苏南大叔个人觉得翻译成“恢复”更加合适一些。

前置阅读

这篇文章的内容,是和下面的两篇文章的代码,配套使用的。

hydrateRoot() 官方说明

reacthydrateRoot()的官方说明:

函数原型:

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

因为应用场景的问题,这里依然暂时不考虑options的情况。

createRoot() 兄弟函数

hydrateRoot()的兄弟函数是createRoot(),官方说明:

函数原型是:

const root = createRoot(domNode, options?)

两者在使用方面,是非常的类似。这个相似度,请参考下面的代码说明。

最简单的代码修改方式

这里还是使用最简单的create-react-appcra模版来说事。执行下面的命令即可获得目标代码。

create-react-app test
cd test
npm i react-router-dom --save

参考文章:

精简版src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

注水版src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.hydrateRoot(document.getElementById('root'),<App/>);

没错,核心部分就这么多。

最简单的代码构建方式

src/index.js进行修改后,npm start命令就没有啥太大意义了。执行的话,也是有报错信息。这里有意义的命令,就是这个npm run build,就可以得到一个build/static/js/main.xxxxx.js。这个就是配合这些脱水函数的输出模版里面的ssr.js文件,记得改名即可。

苏南大叔:React SSR,如何理解和使用注水函数hydrateRoot()? - hydrateRoot代码
React SSR,如何理解和使用注水函数hydrateRoot()?(图2-2)

这个就是获取ssr.js的最简单的方式,因为苏南大叔的react系列文章,大多数都是基于这个create-react-app的默认cra模版的。所以,这种获取带hydrateRoot()函数的特殊ssr.js,是最好理解的。

相关的代码修改

本文仅仅是描述,获得带hydrateRoot()函数的特殊ssr.js文件的最简单方式,以及相关函数的最简单使用方式。仅仅需要小小的变通,就可以使用这个注水函数了。

但是,这个函数的背后,隐患着较为复杂的后续代码修改逻辑。这个就在后面的文章里面再进行说明。目前,只是形式上获得了ssr.js。但是,极有可能它是不生效或者出错的。但是,这并不是目前这篇文章所要解决的问题了。

本文仅仅解决,代码的调用,以及生成文件的问题。生成文件的有效性,并不是本篇文章所能解决的问题。

结束语

苏南大叔的react经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react