关于前端:JavaScript-Weekly-570比较-Svelte-和-React

29次阅读

共计 5491 个字符，预计需要花费 14 分钟才能阅读完成。

🥳 欢送有趣味的小伙伴，一起做点有意义的事！

我发动了一个 周刊翻译打算，仓库地址，拜访地址

当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。

想参加的小伙伴，能够 wx 私信，也能够给仓库发 issue 留言，我博客也有具体的集体联系方式：daodaolee.cn

前言

Pomodone：一个小型工夫跟踪应用程序，基于以 25 分钟为距离工作的番茄工作法。它有一个 25 分钟的计时器（在 Web Worker 中运行）并将“poms”的历史记录保留到一个小型 Firebase 数据库中，传送门

二者的用法

React 的钩子是一个很好的封装，我创立了一个 useCurrentUser 钩子，让它侦听身份验证的变动并相应地设置一些状态。而后，当留神到身份验证变动时，我就能够确信 React 会按需从新渲染。

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

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

在任何组件里，能够这样写：

const [currentUser] = useCurrentUser()

这种写法，工作量很小，并且能够让任何组件快速访问以后用户。惟一的毛病就是可能有很多 onAuthStateChanged 监听器，这个时候能够通过仅绑定一个监听器 或者 将以后用户放到以后上下文中来防止。

说到上下文，更靠近于在 Svelte 中的写法：Writable Store

export const currentUser = writable()

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

在高级 Svelte 组件中，能够在 onMount 中调用它，它会在组件装置的时候运行一次（该办法会被返回，所以能够在移除组件的时候勾销订阅，就像 useEffect 返回一个函数一样）

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

当初，在 Svelte 代码里的任何地位，组件都能够导入 currentUser 可写 store。我比拟在意的是，currentUser 不是一个值，而是一个 store，因而有相对的状态控制权。当然也能够订阅它并手动批改状态的扭转：

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

或者，如果只想读取最新的值，能够加一个 $ 前缀：

console.log($currentUser)

以上就是 Svelte 的一些语法技巧，$ 符号会主动订阅 store 里最新的值，它的益处就是 Svelte 不会每次须要读取最新的值的时候都得订阅一次。

简略来说，两个库仿佛都采纳了相似的办法：都容许订阅一个 Firebase 监听器(上文的 demo)，并在状态发生变化的时候更新数据。

应用 Worker

我设计的 Pomodone) 必须放弃尽可能精确的 25 分钟的计时器运行。如果浏览器选项卡在后盾（例如，不是焦点选项卡），大多数浏览器将升高其 setTimeout 调用的优先级，而不是严格按工夫运行它们。大多数时候在网络上这不是什么大问题，然而当用户通过您的利用跟踪 25 分钟的工作时，问题就呈现了！此外，在 25 分钟的过程中，任何渺小的时间差都会导致最终工夫相距甚远。然而，如果这些超时被移到 Web Worker 中，它们就会按时运行并且不会被浏览器勾销优先级。

因而，在我的 Tracker 组件里，须要实例化一个 web worker，发送信息并接收数据（比方剩余时间）。我发现 React 比 Svelte 治理要繁琐。因为每次从新渲染组件时都会从新执行 React 组件，所以就会很容易创立上千个 worker，此时就须要应用 useRef 来援用所创立的 worker，从而防止这个问题。

首先，我设置了组件所需的初始状态：

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])

接下来，当用户点击 Start 按钮的时候，就会给 worker 发送一个音讯：

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

如果用 Svelte 写的话，代码很相似，不过有两个中央会更简便：

  1. 不用将 worker 保留在 userRef 上，只须要调配一个变量就好
  2. 能够将事件监听封装到函数里，该函数也不会成为 userEffect 的依赖 — 也就是封装到 userCallback 里。
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...}
}

条件渲染

我喜爱 React 的局部起因是 在模板语法中嵌入 JS：

// React
<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 的模板语法也很好用：

// Svelte
<ul class="poms-list">
  {#each currentDayPoms as value, index}
    <li
      title={`Finished at ${format(new Date(value.timeFinished),
        'H:mm:ss'
      )}`}
    >
      {index + 1}
    </li>
  {/each}
</ul>

在渲染组件时，Svelte 的语法也很简便，很像 JSX：

// Svelte
<History pomodoros={pomodoros} />
  
// Svelte(collapsed props)
<History {pomodoros}/>

Svelte 中的响应式 $

React 要求应用 userEffect 和 其余钩子管制代码运行，并在从新渲染组件时从新运行代码。Svelte 不同之处在于，默认状况下，大部分代码只会运行一次。当然，当有大量数据的节点渲染夹杂函数运行的时候，React 的从新渲染也有它的长处。比方这样：

const input = props.inputData
const transformed = input.map((item) => transformItem(item))

return <div>{JSON.stringify(transformed, null, 2)}</div>

如果用户提供了新的 props.inputData，组件将从新渲染更新，拿到的值也是新的。而在 Svelte 中并非如此：

<script>
export let input;
const transformed = input.map((item) => transformItem(item))
</script>

<div>{JSON.stringify(transformed, null, 2)}</div>

解决响应式问题，要么应用 $ 符号，要么将转换逻辑加到模板里：

// 应用 $
<script>
export let input;
$: transformed = input.map((item) => transformItem(item))
</script>

<div>{JSON.stringify(transformed, null, 2)}</div>

// 应用模板
<script>
export let input;
</script>

<div>{JSON.stringify(input.map((item => transformItem(item))), null, 2)}</div>

组合式组件

组合式组件在组件级别框架里特地重要，React 的 children 属性简化了渲染：

function Box(props) {return <div>{props.children}</div>
}

function App() {
  return (
    <Box>
      <p>hello world!</p>
    </Box>
  )
}

Svelte 里用插槽：

<!-- Box component -->
<div class="box">
  <slot></slot>
</div>

<!-- App component -->
<Box>
  <p>hello world!</p>
</Box>

当波及到多个子组件的时候，二者会有不同的解决形式：

  • React 会有多个 Props：

    function Box(props) {
  return (
    <div>
      <div class="left">{props.left}</div>
      <div class="right">{props.right}</div>
    </div>
  )
}

function App() {return <Box left={<p>hello</p>} right={<p>world!</P>} />
}

  • 会显示命名多个插槽：

    <!-- Box component -->
<div class="box">
  <slot name="left"></slot>
  <slot name="right"></slot>
</div>

<!-- App component -->
<Box>
  <p slot="left">hello</p>
  <p slot="right">world!</p>
</Box>

类名判断

Svelte 有一个小性能，能够有条件地赋值 class：

<div class:is-active={isActive}>

事件监听

Svelte 蕴含了一些用来绑定事件的修饰符：

<script>
function click() {
  // No need to preventDefault ourselves
  // logic here
}
</script>

<button on:click|preventDefault={click}>
  Click me!
</button>

相干链接

原文链接

翻译打算原文

正文完
前端
发表至： 前端
2022-01-09
 0
关于前端:需要了解学习的
关于前端:记录-TypeError-Invalid-attempt-to-spread-noniterable-instance
关于前端:Angular-Component-里使用-const-和-readonly-修饰的属性有什么区别
关于前端:面试官为什么-Promise-比setTimeout-快