假设我们都debounce从了解函数lodash。
debounce
lodash
如果用户输入快速1,12,123,1234,它允许我们继续警告只有一次,有1234,有一定的延迟时间后。
1
12
123
1234
这是用于减少请求数量以进行优化的常用方法。
对于普通的输入字段,我们可以使用这种输入格式debounce并且它可以正常工作。
问题 :一旦我们添加了一个setState具有相同的回调中debounce,将debounce不会工作正常。
setState
有人知道原因吗?
import React, { useState } from "react"; import "./styles.css"; import { debounce } from "lodash"; export default function App() { const [input, setInput] = useState(""); const debouceRequest = debounce(value => { alert(`request: ${value}`); }, 1000); const onChange = e => { setInput(e.target.value); // Remove this line will lead to normal debounce debouceRequest(e.target.value); }; return ( <div className="App"> <input onChange={onChange} /> </div> ); }
试试看(使用useCallback):
import React, { useState, useCallback } from "react"; import "./styles.css"; import { debounce } from "lodash"; const request = debounce(value => { alert(`request: ${value}`); }, 1000); export default function App() { const [input, setInput] = useState(""); const debouceRequest = useCallback(value => request(value), []); const onChange = e => { debouceRequest(e.target.value); setInput(e.target.value); // Remove this line will lead to normal denounce }; return ( <div className="App"> <input onChange={onChange} /> </div> ); }