React SSR,如何理解和使用注水函数hydrateRoot()?
发布于 作者:苏南大叔 来源:程序如此灵动~继续react
的SSR
话题,讲完了react
脱水的两个函数,renderToString()
和renderToPipeableStream()
。现在来讲讲注水函数hydrateRoot()
。这个函数本身用起来是非常的简单,就是连带的事情比较麻烦。
苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程心得体会。本文测试环境:nodejs@20.18.0
,create-react-app@5.0.1
,react-router-dom@6.27.0
,react@18.3.1
。官方把这个行为称之为“注水”,苏南大叔个人觉得翻译成“恢复”更加合适一些。
前置阅读
这篇文章的内容,是和下面的两篇文章的代码,配套使用的。
- https://newsn.net/say/react-render-to-string.html
- https://newsn.net/say/react-render-to-pipeable-stream.html
hydrateRoot() 官方说明
react
对hydrateRoot()
的官方说明:
函数原型:
const root = hydrateRoot(domNode, reactNode, options?)
因为应用场景的问题,这里依然暂时不考虑options
的情况。
createRoot() 兄弟函数
hydrateRoot()
的兄弟函数是createRoot()
,官方说明:
函数原型是:
const root = createRoot(domNode, options?)
两者在使用方面,是非常的类似。这个相似度,请参考下面的代码说明。
最简单的代码修改方式
这里还是使用最简单的create-react-app
的cra
模版来说事。执行下面的命令即可获得目标代码。
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
文件,记得改名即可。
这个就是获取ssr.js
的最简单的方式,因为苏南大叔的react
系列文章,大多数都是基于这个create-react-app
的默认cra
模版的。所以,这种获取带hydrateRoot()
函数的特殊ssr.js
,是最好理解的。
相关的代码修改
本文仅仅是描述,获得带hydrateRoot()
函数的特殊ssr.js
文件的最简单方式,以及相关函数的最简单使用方式。仅仅需要小小的变通,就可以使用这个注水函数了。
但是,这个函数的背后,隐患着较为复杂的后续代码修改逻辑。这个就在后面的文章里面再进行说明。目前,只是形式上获得了ssr.js
。但是,极有可能它是不生效或者出错的。但是,这并不是目前这篇文章所要解决的问题了。
本文仅仅解决,代码的调用,以及生成文件的问题。生成文件的有效性,并不是本篇文章所能解决的问题。
结束语
苏南大叔的react
经验文章,请点击:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。