在这篇文章中,我将展示如何在 useState hook React 应用程序中创建闭包。
我不会解释什么是闭包,因为关于这个主题的资源有很多,我不想重复。我建议阅读 @imranabdulmalik 的这篇文章。
简而言之,闭包(来自 Mozilla):
...捆绑在一起(封闭)的函数及其周围状态(词法环境)的引用的组合。换句话说,闭包使您可以从内部函数访问外部函数的作用域。在 JavaScript 中,每次创建函数时都会创建闭包,在函数创建时.
以防万一您不熟悉术语词汇环境,您可以阅读@soumyadey 的这篇文章或这篇文章。
在 React 应用程序中,您可能会意外创建属于使用 useState 挂钩创建的组件状态的变量的闭包。发生这种情况时,您将面临陈旧闭包问题,也就是说,当您引用状态的旧值时,它同时已更改,因此它不再相关。
我创建了一个 Demo React 应用程序,其主要目标是增加一个计数器(属于状态),该计数器可以在 setTimeout 方法的回调中的闭包中关闭。
简而言之,这个应用程序可以:
下图中,显示了应用程序的初始 UI 状态,计数器为零。
我们将分三步模拟柜台关闭:
5秒后,计数器的值为2。
计数器的预期值应该是12,但我们得到2。
发生这种情况的原因是因为我们在传递给setTimeout的回调中创建了计数器的关闭,并且当触发超时时,我们从其开始设置计数器旧值(即 1)。
setTimeout(() => { setLogs((l) => [...l, `You closed counter with value: ${counter}\n and now I'll increment by one. Check the state`]) setTimeoutInProgress(false) setStartTimeout(false) setCounter(counter + 1) setLogs((l) => [...l, `Did you create a closure of counter?`]) }, timeOutInSeconds * 1000);
遵循应用程序组件的完整代码。
function App() { const [counter, setCounter] = useState(0) const timeOutInSeconds: number = 5 const [startTimeout, setStartTimeout] = useState (false) const [timeoutInProgress, setTimeoutInProgress] = useState (false) const [logs, setLogs] = useState >([]) useEffect(() => { if (startTimeout && !timeoutInProgress) { setTimeoutInProgress(true) setLogs((l) => [...l, `Timeout scheduled in ${timeOutInSeconds} seconds`]) setTimeout(() => { setLogs((l) => [...l, `You closed counter with value: ${counter}\n and now I'll increment by one. Check the state`]) setTimeoutInProgress(false) setStartTimeout(false) setCounter(counter + 1) setLogs((l) => [...l, `Did you create a closure of counter?`]) }, timeOutInSeconds * 1000); } }, [counter, startTimeout, timeoutInProgress]) function renderLogs(): React.ReactNode { const listItems = logs.map((log, index) => {log} ); return{listItems}
; } function updateCounter(value: number) { setCounter(value) setLogs([...logs, `The value of counter is now ${value}`]) } function reset() { setCounter(0) setLogs(["reset done!"]) } return (); } export default App;Closure demo
Counter value: {counter}
Follow the istructions to create a closure of the state variable counter
- Set the counter to preferred value
- Start a timeout and wait for {timeOutInSeconds} to increment the counter (current value is {counter})
- Increment by 10 the counter before the timeout
{ renderLogs() }
该解决方案基于 useRef 钩子的使用,它允许您引用渲染不需要的值。
所以我们添加到App组件中:
const currentCounter = useRef(counter)
然后我们将修改setTimeout的回调,如下所示:
setTimeout(() => { setLogs((l) => [...l, `You closed counter with value: ${currentCounter.current}\n and now I'll increment by one. Check the state`]) setTimeoutInProgress(false) setStartTimeout(false) setCounter(currentCounter.current + 1) setLogs((l) => [...l, `Did you create a closure of counter?`]) }, timeOutInSeconds * 1000);
我们的回调需要读取计数器值,因为我们在增加它之前记录了当前值。
如果您不需要读取值,只需使用功能符号更新计数器即可避免计数器关闭。
seCounter(c => c + 1)
以上是React:陈旧的关闭的详细内容。更多信息请关注PHP中文网其他相关文章!