我已经阅读了水合物和渲染之间的差异,以及renderToNodeStream和renderToString之间的差异,然后尝试创建一个示例项目来演示差异。从我完成的所有测试中,我发现这些新功能之间的行为没有任何区别。
例如,我创建了一个简单的Hello World程序,其中“ World”是我的App组件的参数,而我的server.js和browser.js都使用共享的App组件来设置参数(在服务器中,参数值设置为“世界”,并在浏览器中将参数值设置为“我”)。就像我期望的那样,当我使用browser.js中的hydrate函数运行应用程序时,它应该忽略差异,因为据我所知,hydrate不应更改组件值,而应添加事件侦听器。但是,当我运行该应用程序时,我看到了Hello World,几秒钟后它变成了Hello Me(这是我期望的渲染效果,而不是水合)。
我还尝试通过创建一个示例应用程序来测试新的renderToNodeStream函数,其中来自服务器的数据传输缓慢。我希望我的应用程序可以在服务器将数据块传输到客户端的同时运行,但是它似乎与renderToString完全一样(所有组件字符串都同时出现)。
能否请某人帮助我并解释我做错了什么?
最佳答案
当组件的尺寸较小时,性能不会有显着差异。renderToNodeStream
和renderToStream
之间的区别是renderToNodeStream
将使渲染器从stream.Readable
扩展
我认为,当组件的大小变得很大(例如10MB)时,renderToNodeStream
将在组件解析时逐个发送,而renderToStream
将等待解析完成然后发送整个内容。我没有做任何测试,但我认为renderToNodeStream
会有更好的性能。