React v16 hydrate和renderToNodeStream vs render和renderToString

时间:2017-11-30 11:22:04

标签: javascript reactjs

我已经阅读了水合物和渲染之间以及renderToNodeStream和renderToString之间的差异,然后我尝试创建一个示例项目来演示差异。从我完成的所有测试中,我发现这些新功能之间的行为没有任何区别。

例如,我创建了一个简单的Hello World程序,其中" World"是我的App组件的参数,我的server.js和browser.js都使用共享的App组件来设置参数(在服务器中,参数值设置为" World"在浏览器中的参数值设置为"我")。正如我所料,当我使用浏览器内的水合功能运行应用程序时,它应该忽略差异,因为据我所知,水合物不应该改变组件值,而只是添加事件监听器。但是当我运行应用程序时,我看到了Hello World,几毫秒之后就变成了Hello Me(这就是我对渲染而不是水合物的期望)。

此外,我尝试通过创建一个示例应用来测试新的renderToNodeStream函数,其中来自服务器的数据变慢。我希望我的应用程序在服务器将数据块传输到客户端时运行,但它似乎与renderToString完全一样(所有组件字符串都会立即出现)。

请有人帮我解释我做错了什么?

1 个答案:

答案 0 :(得分:0)

当组件的尺寸很小时,性能不会有显着差异。 renderToNodeStreamrenderToStream之间的区别是renderToNodeStream的渲染器将从stream.Readable扩展

我认为,当组件的大小变得很大(例如10MB)时,renderToNodeStream将在组件解析时逐个发送,而renderToStream将等待解析完成然后发送整个内容。我没有做任何测试,但我认为renderToNodeStream的性能会更好。