用 useEffect 反应去抖动

Question

我正在尝试使用 debounce 实现自动完成搜索，

下面是我尝试使用 lodash 的 debounce， 似乎去抖不起作用。

我在输入时看到每个字符都在被搜索

   const [query, setQuery] = useState('')
   const _search = () => {
     console.log('query: ', query)
     // network search request
   }

   const search = _.debounce(_search, 300)

   useEffect(() => {
     search()
   }, [query])

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
   })

** 编辑 **

以下作品，是的，我主要从https://stackoverflow.com/a/54666498/433570得到提示 虽然我认为它略有不同

链接的帖子链事件 setQuery => useEffect => useRef => debounce 这里我链接 useCallback => useRef => debounce

尽管核心问题（根据链接的帖子）是每次调用功能组件时都在组件内重新创建变量。

useRef 保存它。

我知道useCallback 记住了函数，但是当因变量发生变化时它也会丢失

这有点含糊，我认为 useCallback 为您提供了记忆功能，但是如果您将以下代码从 useRef 更改为 useCallback 它停止工作..（尽管我们不使用因变量，例如useCallback(() => {}, [var])

const ReviewMetaSelect = (props) => {

  const [query, setQuery] = useState('')


  const search = useRef(_.debounce(query => {

    console.log('query: ', query)

  }, 300))


  // or u can use this
  //const search = useCallback(_.debounce(query => {

    //console.log('query: ', query)

  //}, 300), [])    

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
     search.current(query) // or search(query) with useCallback
   })

  return (
    <View>
      <TextInput
        value={query}
        onChangeText={handleChangeQuery}
      />
    </View>
  )

}

Answer 1

您可以创建带有去抖动功能的自定义组件输入（或在另一个组件中使用），而无需库

例如像这样的一些：

import React, { useEffect, useState } from 'react';

const InputDebounce = () => {

    const [text, setText] = useState('');

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            console.log(text)
            //some function here
        }, 500);

        return () => clearTimeout(timeoutId)
    }, [text])


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

export default InputDebounce;

定义clearTimeOut一个useEffect的return insde非常重要，这样可以正常工作。