Svelte和React的區別是什么

本篇內容主要講解“Svelte和React的區別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Svelte和React的區別是什么”吧!

比較 Svelte 和 React

 驗證

在 React 中創建了一個 useCurrentUser 的鉤子，用于偵聽身份驗證更改并相應地設置一些狀態。然后我可以在 React 任何地方使用，并在身份驗證更改時重新渲染頁面。

export const useCurrentUser = () => {
  const [currentUser, setCurrentUser] = useState(undefined)

  useEffect(() => {
    return firebase.auth().onAuthStateChanged((details) => {
      setCurrentUser(
        details
          ? {
              displayName: details.displayName,
              provider: {
                'github.com': 'GitHub',
              }[details.providerData[0].providerId],
              uid: details.uid,
            }
          : null
      )
    })
  }, [])
  return [currentUser]
}

在任何組件中，都可以使用：

const [currentUser] = useCurrentUser()

這可以讓任何組件快速獲取當前用戶。唯一的缺點是在每一個頁面都有一個 onAuthStateChanged 監聽器，

但可以通過僅綁定一個偵聽器或將當前用戶置于執行上下文中來解決。

執行上下文，在 Svelte 中可以采用的方法并使用可寫存儲。

export const currentUser = writable()

export const listenForAuthChanges = () => {
  return firebase.auth().onAuthStateChanged((details) => {
    if (details) {
      currentUser.set({
        displayName: details.displayName,
        provider: { 
          'github.com': 'GitHub',
        }[details.providerData[0].providerId],
        uid: details.uid,
      })
    } else {
      currentUser.set(null)
    }
  })
}

在頂級 Svelte 組件中，我可以在 onMount 中調用它，它將在掛載組件時執行（該函數是 return 編輯的，因此我們在刪除組件時取消訂閱，就像 useEffect 讓你返回一個函數銷毀）。

onMount(() => {
  return listenForAuthChanges()
})

這樣在 Svelte 代碼庫中的任何地方，組件都可以導入 currentUser 可寫存儲。您可以訂閱它并手動控制狀態更改：

currentUser.subscribe(newValue => {
  ...
})

或者，如果你想讀取最新的值：

console.log($currentUser)

這就是 Svelte 的語法技巧厲害的地方；這個$前綴會獲取最新的值。

雖然對于初學者來說有點奇怪。但是，Svelte 就省去調用 subscribe 的API。

就基本身份驗證而言，兩個庫似乎都采用了類似的方法。雖然確切語法略有不同，但兩者都允許您訂閱 Firebase 偵聽器并在身份驗證狀態更改時獲得更新。

從使用者角度開發

Pomodone 是一個 25 分鐘的計時器，并盡可能準確。如果瀏覽器選項卡處于后臺（不是焦點選項卡），大多數瀏覽器將降低其 setTimeout 調用的優先級并且不會嚴格按時運行它們。大多數時候在網絡上這不是什么大不了的事，但是當用戶通過您的應用程序跟蹤 25 分鐘的工作時，它就有問題，在 25 分鐘的過程中，任何輕微的時間漂移都會導致最終時間相差甚遠。但是，如果將這些超時轉移到 Web Worker 中，它們應該會按時運行，并且不會被瀏覽器取消優先級。

因此，在我的 Tracker 組件中，我需要實例化一個 Web Worker，向它發送消息并接收數據（例如剩余時間）。這時我發現 React 比 Svelte 更重管理的一個領域；

因為 React 組件在每次重新渲染時都會重新執行，所以很容易導致創建數千個 worker！必須使用 useRef 通過維護對您創建的工作程序的引用來避免此問題。

首先，我設置了組件所需的初始狀態：

const [currentPom, setCurrentPom] = useState(null)
const [currentUser] = useCurrentUser()
const worker = useRef(null)

然后創建一個 useEffect 掛鉤，如果需要，它將實例化 worker，并綁定一個事件監聽器來監聽消息：

useEffect(() => {
  if (!worker.current) {
    worker.current = new Worker(workerURL)
    window.worker = worker.current
  }

  const onMessage = (event) => {
    if (event.data.name === 'tick') {
      setCurrentPom((currentPom) => ({
        ...currentPom,
        secondsRemaining: event.data.counter,
      }))
    } else if (event.data.name === 'start') {
      // More branches removed here to save space...
    }
  }
  worker.current.addEventListener('message', onMessage)

  return () => {
    worker.current.removeEventListener('message', onMessage)
  }
}, [currentUser])

然后，當用戶點擊“開始”按鈕時，我必須向 worker 發送一條消息：

const onStartPom = () => {
  if (!worker.current) return
  worker.current.postMessage('startTimer')
}

Svelte 看起來非常相似，但在我看來有兩個小的變化使 Svelte 代碼更易于閱讀：

• 我們不必將 worker 保留在 useRef 中，只需將其分配給一個變量即可。

• 我們可以更輕松地將事件偵聽器代碼拉出到一個函數中，因為該函數不會成為 useEffect 的依賴項——此時我們必須將它包裝在 useCallback 中。

let worker
onMount(() => {
  worker = new Worker(workerURL)
  worker.addEventListener('message', onWorkerMessage)
  return () => {
    worker.removeEventListener('message', onWorkerMessage)
  }
})

我們也不必使用 React 的 setX(oldX => newX) 約定來設置狀態，只需改變局部變量即可：

function onWorkerMessage(event) {
  if (event.data.name === 'tick') {
    currentPom = {
      ...currentPom,
      secondsRemaining: event.data.counter,
    }
  } else if (event.data.name === 'start') {
    // More branches here removed to save space...
  }
}

這就是 Svelte 好的地方；兩者非常相似，但是一旦習慣 Svelte， 感覺React就像在跳圈。你不能創建一個工作實例，它必須進入 useRef ，然后你不能輕易地將代碼拉出到一個函數中而不需要 useCallback 所以它可以是對 useEffect 的安全依賴。

使用 Svelte，我編寫的代碼更接近于“純”JavaScript，而在 React 中，我的更多代碼被包裝在 React 原語中。

條件渲染

React 它只是 JavaScript。與 Svelte 的模板語言相比， React 中你不使用獨特的模板語法而是在編寫 JavaScript：

SideTabs

<ul>
  {pomsForCurrentDay.map(entryData, index) => {
    const finishedAt = format(new Date(entryData.timeFinished), 'H:mm:ss')
    return <li title={`Finished at ${finishedAt}`}>{index + 1}</li>
  })}
</ul>

在過去，我發現模板語言是趨勢但不靈活，但 Svelte 提供了恰到好處的模板，同時也使您能夠使用 JavaScript。也就是說，我總是會發現 React 的方法更簡單 - 至少在我的腦海中 - 我認為對于熟悉 JavaScript 并正在學習庫的人來說更友好。

然而，在渲染組件時，Svelte 確實對其語法進行了一些不錯的修改（感覺非常像 JSX）。我最喜歡的是折疊道具的能力：

<History pomodoros={pomodoros} />

Svelte (collapsed props) 

<History {pomodoros}/>

到此，相信大家對“Svelte和React的區別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！