React中函数组件中闭包陷阱如何产生，如何解决？

在什么情况下会产生闭包陷阱？

在React中，当使用useState和useEffect以及useCallback时，我们必须得注意闭包陷阱，避免出现一些意外的行为

什么是闭包陷阱？

闭包是指一个函数可以访问其词法作用域之外的变量。

闭包主要发生的集中情况？

在 useState 中的闭包陷阱

在 useEffect 中的闭包陷阱

在 useCallback 中的闭包陷阱

useState陷阱

出现的问题是：

        当我们想做一个点击事件数值+1时，点击按钮，发现数值更新了，打印的值还是上次的，没有更新；是因为useState修改状态，是异步执行无法直接获取更新后的值

export default function Hooks() {
	const [count, setCount] = useState(0);
	const add = () => {
		setCount( count + 1 );
		console.log(count, '修改前的值');
		}
		return (
			<div>
				<span>{count}</span>
				<button onClick={ add }> 数值加1 </button>
			</div>
			);
		}

解决方法是：

        通过promise.then链式调用；

        可以通过useRef获取最新值

useEffect陷阱

出现的问题是：

        闭包过期

import React, { useState, useEffect } from 'react'
export default function Hooks3() {
	const [count, setCount] = useState(0);
		useEffect(() => {
			setInterval(() => {
			   setCount(count + 1)
			}, 1000)
		}, [])
	useEffect(()=>{
		setInterval(() => {
			console.log(`Count: ${count}`)
		}, 1000);
	}, []);
	return (
		<div>
			<span>{count}</span>
		</div>
		);
	}

这个代码执行完页面上会一直显示count=1

useEffect的第二个参数为空数组时,只会执行一次，会一直执行

闭包陷阱产生的原因是useEffect的函数里引用了某个state，形成了闭包。

解决方法：

        给useEffect的第二个参数添加一个依赖项；

        每次更新时，添加计时器，清除定时器

useCallback陷阱

出现的问题是：

        useCallback 本来拿来优化性能，当依赖变化不用重新注册该函数

        使用时也会出现一定的问题

        陷阱：获取父组件的值，不是最新的值，说明useCallback依赖为空数组

解决方法：

        给useCallback第二个参数添加依赖的数据，依赖变化了函数会重新生成