1

我正在开发一个 Symfony 应用程序，并且刚刚使用https://github.com/spatie/server-side-rendering让 JS 的 SSR 工作。到目前为止，我只为 React 使用“现成的”SSR 解决方案，但目前我正在尝试使用 hyperHTML/viperHTML 并且面临一些到目前为止我无法通过查看可用文档/示例来解决的问题。

我当前的测试片段是这样的：

const viperHTML = require('viperhtml');

class Component extends viperHTML.Component {    
    constructor(props) {
        super();
        this.props = props;
    }

    render() {
        return this.html`
      <h1>Hello, ${this.props.name}</h1>`;
    }
}

console.log(new Component({ name: 'Joe' }).render().toString());

这里的问题是，如果没有明确调用，render()我就没有输出。查看一些官方示例，这不应该是必要的，至少不是Component. 例如，我已经尝试setState()在构造函数中使用，但没有区别。

此外，如果不同时使用console.log()和toString()，我也没有输出。这是出乎意料的。我知道toString()这里可能有必要（没有它<buffer />正在渲染），但这console.log()似乎很奇怪。当然，这可能根本与 viperHTML 无关。但是实例化组件是我唯一需要做的事情。

我也不清楚如何编写一个同构/通用组件，即一个具有标记、事件处理程序等的文件，在服务器上呈现，然后在客户端上水合。当我根据文档（https://viperhtml.js.org/hyperhtml/documentation/#essentials-6）添加内联事件处理程序时，它实际上被内联到呈现的标记中，这不是我想要的。我检查了超形态和 viperNews 应用程序，但到目前为止这并没有真正帮助我。

4

1 回答 1

0

如果有帮助，您可以阅读 viperHTML 测试以了解如何使用组件。

这里的事情是，如果没有显式调用 render() 我没有输出。

组件旨在用于在服务器或客户端呈现布局。这意味着如果你将一个组件实例传递给一个 hyper/viperHTML 视图，你不必担心调用任何东西，它已经为你完成了。

const {bind, Component} = require('viperhtml');

class Hello extends Component {    
  constructor(props) {
    super().props = props;
  }
  render() {
    return this.html`<h1>Hello, ${this.props.name}</h1>`;
  }
}

console.log(
  // you need a hyper/viperHTML literal to render components
  bind({any:'ref'})`${Hello.for({ name: 'Joe' })}`
    // by default you have a buffer to stream in NodeJS
    // if you want a string you need to use toString()
    .toString()
);

由于 NodeJS 默认使用流缓冲区，viperHTML 生成的任何布局都将是缓冲区，因此可以在组合时进行流式处理（即，使用 Promises 作为插值值）。

我也不清楚如何编写一个同构/通用组件，即一个具有标记、事件处理程序等的文件，在服务器上呈现，然后在客户端上水合。

hyperHTML 的原始版本有一个方法称为adopt()，其目的是通过相同的模板文字水合活动节点。

虽然 viperHTML 具有viperhtml.adoptable = true渲染可采用内容的开关，但 hyperHTMLadopt功能还没有完全实现，因此，目前，您可以轻松地在 SSR 和 FE 之间共享视图，但是您需要在 SSR 之后接管客户端页面第一次以不同的方式登陆或做出反应，并在远处接管了客户。

这不是最佳的，但恐怕水合位，做得对，是耗时的，我还没有找到这样的时间来完成它并运送它。

此时可能是 hyperHTML v3。

我希望这个答案有助于理解 viperHTML 的工作原理以及当前状态。

于 2018-09-10T05:11:25.320 回答