React v16 水合和 renderToNodeStream 与 render 和 renderToString 的区别

Question

React v16 水合和 renderToNodeStream 与 render 和 renderToString 的区别

3

我已经了解了hydrate和render以及renderToNodeStream和renderToString之间的区别，并尝试创建一个示例项目来演示它们的不同之处。但是，通过我所做的所有测试，我无法找到这些新功能之间的任何行为差异。

例如，我创建了一个简单的Hello World程序，其中“World”是我的App组件的参数，我的server.js和browser.js都使用共享的App组件来设置参数（在服务器上，参数值设置为“World”，在浏览器中，参数值设置为“Me”）。正如我所预期的那样，当我在browser.js中使用hydrate函数运行应用程序时，它应该忽略差异，因为我理解hydrate不应更改组件值，而只添加事件侦听器。但是当我运行应用程序时，我看到Hello World，几毫秒后它变成了Hello Me（这是我从render而不是hydrate中预期的结果）。

此外，我尝试使用新的renderToNodeStream函数进行测试，创建了一个样本应用程序，其中从服务器传输数据速度很慢。我期望我的应用程序在服务器向客户端传输数据块时运行，但它似乎与renderToString完全相同（所有组件字符串一次性出现）。

请问有人能够帮助我并解释我做错了什么吗？

- SyndicatorBBB

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Youbent · Accepted Answer

当组件的大小比较小的时候，性能不会有太大的差别。而`renderToNodeStream`和`renderToString`之间的区别在于，`renderToNodeStream`使用了从`stream.Readable`扩展的渲染器。

我认为当组件变得非常庞大（例如10MB）时，`renderToNodeStream`将会在解析组件时逐个发送数据段，而`renderToString`则会等待解析完成后一次性发送整个组件。虽然我没有进行过任何测试，但我认为`renderToNodeStream`的性能更好。