Question

我已经使用StencilJS一段时间了，来自React的背景，我写某些组件的直觉是将它们写为无状态。但是，模具文档根本没有提到无状态组件。这就是为什么我在这里写信来学习其他人的体验

Answer 1

您可以在Stencil元素内编写功能组件。 As an example：

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true
})
export class MyApp {
  render() {
    return (
      <div>
        <Loading />
       </div>
    );
  }
}

const Loading = () => {
  return (
    <div class="loading">
      <h1>Activating Santa</h1>
      <span></span>
    </div>
  );
};

在这种情况下，<Loading>是类似于React模型的无状态功能组件-您可以获取其道具并获得子代，等等。

无状态模板组件不能导出为顶级Web组件-必须将其定义为类。

Answer 2

您应该查看功能组件：https://stenciljs.com/docs/functional-components 以创建无状态组件，并且它们：

未编译为 Web 组件，
不要创建 DOM 节点，
没有 Shadow DOM 或作用域样式，
没有生命周期钩子，

根据文档，如果一个组件必须保持状态、处理事件等，它可能应该是一个类组件。如果一个组件的目的是简单地封装一些标记以便它可以在您的应用程序中重复使用，那么它可能是一个功能组件

渲染stenciljs无状态组件

2 个答案: