<script>
  ...
</script>

<main>
  <Heading count={count} />
  <Button color={color} handleClick={handleClick} />
</main>

「React」

回到 App.js, 將如下代碼拷貝到你的 App() 函數(shù)中狀態(tài)聲明部分的下方：

return (
  <main>
    <Heading count={count} />     
    <Button color={color} handleClick={handleClick} />
  </main>
)

該代碼從 App() 函數(shù)中返回 UI 界面的 JSX。

這里 Svelte 和 React 的做法都很類似，屬性的傳遞也幾乎相同。而 Svelte 的模板看起來跟 React 的 JSX 很像。

如果你是一個(gè)對(duì) Svelte 充滿好奇的 React 開發(fā)人員，在屬性傳遞上 Svelte 沒有什么新奇之處。而在接收屬性時(shí) Svelte 有點(diǎn)點(diǎn)不一樣，后面將進(jìn)行介紹。

「狀態(tài)向上傳遞」

為了讓這個(gè)應(yīng)用正常工作，每次點(diǎn)擊按鈕時(shí)，必須讓 App 組件的 count 狀態(tài)值增1。因此需要一個(gè)機(jī)制來將數(shù)據(jù)從子組件傳遞給父組件。

前面已經(jīng)通過將 handleClick() 函數(shù)作為屬性傳遞給 Button 組件。

接下來馬上要開始編寫的這個(gè)屬于 App 組件的函數(shù)。當(dāng)把它作為屬性傳遞給 Button 子組件，Button 組件就能在每次被點(diǎn)擊時(shí)調(diào)用這個(gè)函數(shù)。這就是 App 組件能響應(yīng)其子組件狀態(tài)變更的原因。

handleClick() 這個(gè)函數(shù)負(fù)責(zé)用來更新 App 組件的 count 和 color 狀態(tài)值。

「Svelte」

在 App.svelte 中編寫 handleClick 函數(shù)代碼如下：

const colors = ['#00ff00', '#ff0000', '#0000ff'];

let handleClick = () => {
  count++;
  color = colors[Math.floor(Math.random() * 3)];
}

「React」

在 App.js 中編寫 handleClick 函數(shù)代碼如下：

const colors = ['#00ff00', '#ff0000', '#0000ff'];

let handleClick = () => {
  setCount(count+1);
  setColor(colors[Math.floor(Math.random() * 3)]);
}

在 React 需要使用早先聲明的 setCount() 和 setColor() 方法來更新狀態(tài)值，而 Svelte 則可以直接更新。

現(xiàn)在我們可以開始編寫 Heading 組件了。

「編寫 Heading 組件」

Heading 組件顯示這個(gè)應(yīng)用的標(biāo)題以及點(diǎn)擊計(jì)數(shù)器。這不是一個(gè)有狀態(tài)的組件，其接收狀態(tài)值 count 來顯示按鈕點(diǎn)擊次數(shù)。

在 Svelte 項(xiàng)目的 src  文件夾中創(chuàng)建一個(gè)名為 Heading.svelte 的文件。

同樣的在 React 項(xiàng)目的 src 文件夾中創(chuàng)建新文件 Heading.js.

「接收屬性」

「Svelte」

拷貝如下代碼到 Heading.svelte 文件：

<script>
  export let count;
</script>

<h1>Hello, I am a Svelte App!</h1>
<h2>The following button has been clicked {count} times.</h2>

請(qǐng)注意看上述代碼中 <script> 里的代碼。這行代碼告訴 Svelte 說，該組件將接收一個(gè)名為 count 的屬性。

這樣就可以在 Heading 組件的 HTML 模板中直接顯示 count 這個(gè)屬性。

這個(gè)寫法稍微有點(diǎn)點(diǎn)奇怪，但在文件頂部直接聲明屬性的方式看起來不錯(cuò)，而且可以直接使用這個(gè)屬性。

查看更多精品文章，戳這里?? 

「React」

切換到 Heading.js 文件，拷貝如下內(nèi)容到該文件：

// ConardLi
function Heading({ count }) {
  return (
    <div>
      <h1>Hello, I am a React App!</h1>
      <h2>The following button has been clicked {count} times.</h2>
    </div>
  )
}

export default Heading;

這段代碼創(chuàng)建一個(gè)新的名為 Heading 函數(shù)式組件，該組件有一個(gè)參數(shù) { count }, 這是從傳遞給組件的 props 對(duì)象中提取出來的。

「編寫 Button 組件」

Button 組件在界面上顯示一個(gè)按鈕，同時(shí)接收兩個(gè)屬性，分別是用來定義顏色的 color 和在點(diǎn)擊時(shí)觸發(fā)的 handleClick() 函數(shù)。

在 Svelte 項(xiàng)目的 src 文件夾中創(chuàng)建新文件 Button.svelte.

在 React 項(xiàng)目的 src 文件夾中創(chuàng)建新文件 Button.js.

「事件偵聽」

類似點(diǎn)擊和其他鼠標(biāo)事件等交互式事件的偵聽上，Svelte 和 React 的做法有一些不同。

「Svelte」

拷貝如下代碼到 Button.svelte:

// ConardLi
<script>
  export let handleClick;
  export let color;
</script>

<button style="--color: {color}" on:click={handleClick}>
  Click me!
</button>

上述代碼中兩個(gè)屬性都是在頂部的 <script>標(biāo)簽中定義的。

然后它創(chuàng)建了一個(gè)按鈕。請(qǐng)注意第 6 行代碼的語法，忽略掉下一節(jié)要介紹的樣式部分，直接看按鈕點(diǎn)擊的事件偵聽器，它跟以往使用的習(xí)慣不同。

Svelte 使用一個(gè) on: 指令來給 DOM 元素添加事件偵聽器。Svelte 使用非常簡(jiǎn)潔方法進(jìn)行事件修改，甚至可以只在按鈕首次點(diǎn)擊時(shí)觸發(fā)。更詳細(xì)的關(guān)鍵事件的觸發(fā)請(qǐng)閱讀 dispatch your own component events 這篇文檔。

「React」

拷貝如下代碼到 Button.js:

function Button({ color, handleClick }) {
  return (
    <button style={styles}  onClick={handleClick}>
      Click me!
    </button>
  )
}

export default Button;

如果服務(wù)依然運(yùn)行中，將會(huì)看到這里有報(bào)錯(cuò)信息，別擔(dān)心，下面我們將通過添加 styles 對(duì)象來可以解決這個(gè)問題。

上述代碼創(chuàng)建一個(gè)名為 Button() 的函數(shù)式組件，同時(shí)接收一個(gè)參數(shù) props, 參數(shù)包含兩個(gè)屬性 color 和 handleClick。handleClick() 函數(shù)在 handleClick 屬性上定義，可以在 JSX 上使用一個(gè)標(biāo)準(zhǔn)的 onClick 事件來觸發(fā)。

「動(dòng)態(tài)樣式」

在這個(gè)應(yīng)用中 Button 組件介紹一個(gè)顏色值作為屬性，該顏色值就是按鈕的背景色。

「Svelte」

Svelte 的動(dòng)態(tài)樣式?jīng)]有我期望的那么直接。

很不幸，不能直接在 <style> 標(biāo)簽中使用屬性值。不過可以使用組件的 HTML 作為在 JavaScript 和 CSS 之間通訊的方法。

在 Button 組件 Button.svelte 的 HTML 代碼下方增加如下代碼：

<style>
  button {
    color: white;
    background-color: var(--color);
  }
</style>

background-color 樣式屬性不能直接引用 color 屬性的值，它引用的是一個(gè)名為 color的樣式變量，這個(gè)樣式變量在前面的 HTML 代碼中通過 style="--color: {color}" 進(jìn)行定義。

這個(gè)做法有一點(diǎn)點(diǎn)笨拙，但考慮到這個(gè)樣式僅在組件內(nèi)有效，我們也是可以接受的。當(dāng)然了，也可以定義全局樣式，具體請(qǐng)閱讀 global CSS 這篇文檔：https://svelte.dev/docs#style。

「React」

在 React 中可以有很多種方法給組件添加樣式。直接在元素上編寫樣式是最常用的方法。

要在 JSX 中使用內(nèi)嵌樣式，可以使用樣式創(chuàng)建一個(gè)對(duì)象，然后賦值給元素的 style 屬性，剩下的部分前面已經(jīng)實(shí)現(xiàn)過了。

在 Button() 函數(shù)中的 return 語句前面添加如下代碼來創(chuàng)建 styles 對(duì)象：

const styles = {
  backgroundColor: color,
  color: '#ffffff'
}

「測(cè)試應(yīng)用」

保存所有文件，如果應(yīng)用還沒有啟動(dòng)，那現(xiàn)在就各自啟動(dòng)服務(wù) ( Svelte : npm run dev, React : npm start)。然后打開瀏覽器的兩個(gè) Tab 分別訪問 localhost:5000 和 localhost:3000 。

依次點(diǎn)擊兩個(gè)頁面的按鈕，看看效果

「Svelte」

「React」

從運(yùn)行效果來看，Svelte 和 React 似乎在樣式上有點(diǎn)不同，但是功能已經(jīng)完成了。你對(duì)這兩個(gè)框架的感覺怎樣呢？

本文翻譯自 React vs. Svelte: Comparing the Basics (twilio.com)：https://www.twilio.com/blog/react-svelte-comparing-basics

抖音前端正急缺人才，如果你想加入我們，歡迎加我微信和我聯(lián)系。另外如果你想加入高質(zhì)量前端交流群，或者你有任何其他事情想和我交流也可以添加我的個(gè)人微信 ConardLi 。

文中如有錯(cuò)誤，歡迎在留言區(qū)和我留言，如果這篇文章幫助到了你，歡迎點(diǎn)贊、在看和關(guān)注。你的點(diǎn)贊、在看和關(guān)注是對(duì)我最大的支持！

「結(jié)論」

這是一次對(duì) Svelte 有趣的探索，到目前位置二者能力差不多。Svelte 的模板語言非常有趣，特別是 on: 指令。實(shí)話實(shí)說我很懷念編寫 HTML 模板的日子。我一定會(huì)用 Svelte 來編寫更多的應(yīng)用，同時(shí)我也將深入了解諸如生命周期和數(shù)據(jù)綁定方面的能力，這些對(duì) React 當(dāng)前階段來說還是有點(diǎn)痛苦的。

如果你也在學(xué)習(xí) Svelte 的話，別忘了跟大家分享。

你覺得哪個(gè)更好用呢？