在 Svelte 中反应 — 以反应方式了解 Svelte 中的组件

        这个故事是“苗条的反应”系列的第一章

        直到几周前，React 还是“是”我开发 UI 的方式。这个故事是关于我通过将我的投资组合网站从 react 转变为 svelte 学到的关键点。

        Svelte 是该领域相对较新的参与者。它将 React 的主要组件虚拟 DOM 扔进了坑里，让 JavaScript 重回昔日辉煌。与反应相比，它更快更小。尽管它具有某些优点，但 svelte 也有其缺点。与反应相比，其中之一将是相对不存在的社区支持。Svelte 不是一个成熟的框架，因此在按下生产按钮之前应该采取预防措施。

成分

初始化组件

        react 和 svelte 都围绕着一个术语“组件”。组件只不过是可以在 UI 中看到的代码块。例如，一个 html 按钮就是一个组件。这两个框架都有内置的 HTML 组件，并且可以灵活地支持创建自定义组件。道具是可以传递给组件的参数。下面展示了 react 和 svelte 的语法对比：

        甲阵营组件可以被定义为一个简单的JavaScript函数，返回“JSX”元素

<span style="background-color:#f2f2f2"><span style="color:#292929"><em>// React Component
</em> function Welcome() { 
  //逻辑在这里
  return <h1>Hello, World</h1>; 
}</span></span>

        甲斯维尔特组件被定义为如下。html 组件所需的所有 javascript 都进入 <script> 标记，然后是组件 html，其样式就像常规 html 代码一样。

<span style="background-color:#f2f2f2"><span style="color:#292929"><em>// Svelte 组件
</em><script> 
  // 逻辑放在这里
</script> 

<!-- 组件 html 放在这里 --> 

<style> 
   /* 样式放在这里 */ 
</style></span></span>

导出和导入组件

        阿反应成分使用以下语法导出：

<span style="background-color:#f2f2f2"><span style="color:#292929">//Welcome.js
导出默认 Welcome;</span></span>

        它使用以下语法在其他 react 组件中导入和访问：

<span style="background-color:#f2f2f2"><span style="color:#292929">//App.js 
import Welcome from '/path/to/Welcome'</span><span style="color:#292929">function App(){ 
  return ( 
    <div> 
      <Welcome/> 
    </div> 
  ); 
}</span></span>

        这是常规 javascript 导入和导出的工作方式。

        一个苗条的成分不明确的出口。svelte 组件的名称与定义它的文件的名称相同。它可以在其他 svelte 组件中导入和访问，如下所示：

<span style="background-color:#f2f2f2"><span style="color:#292929">//index.svelte 
<script> 
  import Welcome from '/path/to/Welcome.svelte'; 
</脚本></span><span style="color:#292929"><div> 
  <欢迎/> 
</div></span></span>

道具

访问组件中的道具

        在react 中，要将 props 传递给组件，您可以将 props 对象作为参数传递给函数。可以使用“.attribute”语法从道具对象访问单个道具。

<span style="background-color:#f2f2f2"><span style="color:#292929"><em>// React Component
</em> function Welcome(props) { 
  //逻辑到这里
  return <h1>Hello, {props.name}</h1>; 
}</span></span>

        在苗条的桌子转动。您访问传递给组件的 props 的方式是通过使用“export”关键字在 <script> 元素中创建的变量。可以使用“{prop_name}”语法在组件的相应 html 标记中访问单个道具。

<span style="background-color:#f2f2f2"><span style="color:#292929"><em>// Svelte Component
</em> <script> 
  export let prop1 = "default initial value"; 
  控制台日志（prop1）；
  // 只读 props 
  export const readOnlyProp = "default initial value" 
</script> 

<p> {prop1} </p></span></span>

将道具传递给组件

        在 react 和 svelte 中，props 都以类似的方式传递给组件。该属性使用以下语法传递给组件。在 svelte 的情况下，应注意属性命名必须类似于在子 svelte 组件中使用“export let”关键字定义的命名。

<span style="background-color:#f2f2f2"><span style="color:#292929"><欢迎名称={"Krish"} /></span></span>

七爪网源码交易平台_成品网站源码_小程序源码-七爪网