如何成功地混合组件

Question

假设我们遇到以下情况：我们有一个包含帖子Feed的博客。当页面加载时，应该已经加载了3个<PostCard>，在服务器端创建;用户将向下滚动或按加载更多按钮，一些新的明信片应动态添加到页面中。

我有Hack的XHP组件<PostCard>，我们有ReactJS组件<PostCard>。

所以，我应该：

1. 在客户端实现整个事情，在React中只使用XHP组件的render()方法constructReactInstance()？ （我在某些时候做过类似的事情，但我注意到页面加载有一些延迟，类似于＆＃34;滞后＆＃34;）。
2. 在服务器端和客户端都实施两次组件？ （这是一种彻底的痛苦......）
3. 别的什么......？

我希望自己清楚明白，有人能够帮助我：smile_cat：

Answer 1

据我所知，没有开源解决方案在HHVM服务器上呈现React，因此您不得不在某处进行交易。 XHP调用RenderReactInstance的方式是集成XHP和React的一种有效解决方案，但是你会受到感知＆＃34;滞后＆＃34;当页面加载然后解析并执行JS。缓存可以提供帮助，但它仍然需要解析和运行JS。或者，您可以将其作为XHP组件，并为较小的详细信息项保存React组件。具体来说，您可能只希望评论部分为React，如果这是主要的交互式组件，并且可以稍晚加载。这可以让博客发布内容在页面加载时呈现，但您可能必须编写其他非React JS来处理新组件的异步加载。这只是一个权衡，我认为你必须确定你认为对你更重要的事情。

Answer 2

当然有一个XHP和React JS的环境。 您可以在此处找到所需内容：https://github.com/hhvm/xhp-js

你可以一起做所有这些非常强大的事情。需要适应时间，但有一个很好的教程，一些Facebook的人，并且它是很好的探索：https://github.com/hhvm/xhp-js-example