我认为VanJS的derive API在三个方面比React的useEffect和useMemo更聪明

2 年 ago
宇, 华
1 minute

VanJS中有一个名为van.derive的API。它可以传递一个回调函数作为参数，当使用的State变量的值发生变化时，回调函数将被执行。对于React用户来说，可以将其理解为可以实现类似于useEffect或者useMemo的功能。尽管功能并不完全相同，请注意。

然而，我认为实际上使用van.derive比React的useEffect和useMemo更加智能，所以我想介绍三个方面。

原因

请不要使用第二个参数。

React的useEffect和useMemo可以通过第二个参数来指定在哪个变量改变时执行回调函数。（虽然可以选择不指定第二个参数，但是这样会改变用途，本次不考虑这种情况）

如果想要在React的useEffect中，每当count的值发生变化时都执行回调函数，可以按照以下方式编写。

useEffect(() => {
  console.log(count)
}, [count])

然而，VanJS不需要指定第二个参数。如果在回调函数中使用了State变量，每次该值发生变化时，回调函数将自动执行。在下面的示例中，当count的值发生变化时，回调函数将被自动执行。

van.derive(() => {
  console.log(count)
})

可能有些细微的事情，但是因为可以省去专门指定变量，所以代码的编写量会减少，并且可以避免因为忘记指定变量而导致的错误。

2. 可以同时支持useEffect和useMemo。

van.derive可以同时实现React的useEffect和useMemo的功能。

因为我们已经在1中解释了`useEffect`的作用，所以此处省略。

在使用React的useMemo时，您可以按照以下方式编写代码。每当count的值改变时，回调函数将被执行。

const calculateExpensiveValue = useMemo(() => {
  let result = 0

  for (let i = 0; i < count * 100000000; i++) {
    result += i;
  }

  return result
}, [count])

如果要在VanJS中实现useMemo的功能，只需类似地声明一个变量并通过return返回值即可，不需要第二个参数。在下面的例子中，当count的值发生变化时，回调函数会自动执行并改变calculateExpensiveValue的值。

const calculateExpensiveValue = van.derive(() => {
  let result = 0

  for (let i = 0; i < count.val * 100000000; i++) {
    result += i
  }

  return result
})

3.执行最小程度的函数

我觉得看到实际动作会更容易理解，所以我准备了一个DEMO。您可以使用浏览器的验证工具查看控制台日志，以确定在哪些条件下回调函数会被执行。

 

在React中，无论toggle、toggle2还是toggle3的值发生变化，都会触发回调函数的执行。

如果在VanJS中，如果toggle为false，则无论更改toggle2或toggle3的值如何，回调函数都不会被执行。这是因为如果toggle为false，那么if语句的第一个条件toggle1.val将总是为假，不需要再检查后续条件!toggle2.val && !toggle3.val的值。

总结

以下是我认为 VanJS 的 van.derive API 相比于 React 的 useEffect 和 useMemo 更聪明的三个方面。需要注意的是，它们并不完全相同，但我觉得 van.derive API 似乎是尽力考虑了性能的。

最后

我们正在GoQSystem招募一起工作的伙伴！

如果您对此感兴趣，请点击下方链接进行确认。

 

✖
广告
将在 10 秒后关闭
bannerAds