<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 很像。

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

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

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

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

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

handleClick() 這個函數(shù)負責(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 組件顯示這個應(yīng)用的標(biāo)題以及點擊計數(shù)器。這不是一個有狀態(tài)的組件，其接收狀態(tài)值 count 來顯示按鈕點擊次數(shù)。

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

同樣的在 React 項目的 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>

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

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

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

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

「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)建一個新的名為 Heading 函數(shù)式組件，該組件有一個參數(shù) { count }, 這是從傳遞給組件的 props 對象中提取出來的。

「編寫 Button 組件」

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

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

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

「事件偵聽」

類似點擊和其他鼠標(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>

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

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

Svelte 使用一個 on: 指令來給 DOM 元素添加事件偵聽器。Svelte 使用非常簡潔方法進行事件修改，甚至可以只在按鈕首次點擊時觸發(fā)。更詳細的關(guān)鍵事件的觸發(fā)請閱讀 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ù)依然運行中，將會看到這里有報錯信息，別擔(dān)心，下面我們將通過添加 styles 對象來可以解決這個問題。

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

「動態(tài)樣式」

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

「Svelte」

Svelte 的動態(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 屬性的值，它引用的是一個名為 color的樣式變量，這個樣式變量在前面的 HTML 代碼中通過 style="--color: {color}" 進行定義。

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

「React」

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

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

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

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

「測試應(yīng)用」

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

依次點擊兩個頁面的按鈕，看看效果

「Svelte」

「React」

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

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

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

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

「結(jié)論」

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

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

你覺得哪個更好用呢？