发表于

Next.js 中的防抖

作者

React v16.8 中的 useEffect 和 Next.js 中的防抖

React v16.8 引入了名为 useEffect 的新钩子，允许你在函数组件中运行副作用。 useEffect 是处理诸如 API 调用之类的昂贵操作的绝佳方式，但它可能需要一些工作。在这篇文章中，我将向你展示如何在 Next.js 中使用 useEffect 来防抖昂贵的操作。

什么是防抖？

防抖是一种控制函数调用速率的技术。当你有想要仅在用户停止输入时运行的昂贵操作时，它很有用。在这种情况下，你可以对 API 调用进行防抖，以便仅在用户停止输入一段时间后才进行调用。

useEffect

useEffect 是一个钩子，允许你在函数组件中运行副作用。它类似于类组件中的 componentDidMount 和 componentDidUpdate。第一个参数是组件挂载或更新时调用的函数。第二个参数是一个依赖项数组。如果依赖项发生变化，则会再次调用该操作。如果数组为空，则该函数仅在组件挂载时被调用。

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('组件挂载时将被调用')
  }, [])

  useEffect(() => {
    console.log('组件挂载时以及依赖项发生变化时将被调用')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

如何在 Next.js 中进行防抖

你需要做的第一件事是创建一个自定义钩子来处理防抖。这是一个简单的例子：

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

此钩子接受两个参数：要防抖的值和以毫秒为单位的延迟。它返回防抖的值。该钩子使用 useEffect 来设置一个超时，该超时将在指定延迟后更新防抖的值。它还产生一个清理函数，如果值或依赖项发生变化，则清除超时。

现在我们有了可以防抖值的钩子，我们可以用它来防抖 API 调用。这是一个示例：

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

此组件将在用户停止输入 500 毫秒后向 /api/search 发出 API 调用。防抖将使用输入字段的值作为查询字符串来执行 API 调用。

性能

防抖是在 Next.js 中处理昂贵操作的一种廉价方式。它比使用 lodash.debounce 这样的库更便宜，因为它不需要任何额外的依赖项。它也比使用 react-throttle 这样的库更实惠，因为它不需要任何额外的代码来捆绑。

结论

防抖是一种控制函数调用速率的宝贵技术。当你有一个昂贵的操作，你希望它只在用户停止输入时运行时，它非常有用。在这篇文章中，我向你展示了如何在 Next.js 中使用 useEffect 来防抖昂贵的操作。

如果你喜欢这篇文章，你可能还会喜欢 JavaScript Hashmap, Performant and Simple。

在 Twitter 上讨论

分享