【React中的闭包陷阱】

闭包陷阱

前言
什么是闭包
为什么react会存在闭包陷阱
如何解决闭包陷阱

前言

以下分析按照react的函数组件写法进行

什么是闭包

函数能够访问并记住其定义时所在作用域（即使该函数在定义的作用域外执行），这个函数 + 词法环境的整体就是闭包

typescript 复制代码

// 节流实现 - 闭包
function throttle(fn, dealy) {
	let timerId; // 定时任务id
	let targetArgs; // 存储尾参数
	return function (...args) {
		targetArgs = args;
		if (!timerId) {
			timerId = setTimeout(() => {
				fn.apply(this, targetArgs)
				timerId = null
			}, dealy)
		}
	}
}
function throttleTarget(a, b) {
	return a + b;
}
const throttleEffect = throttle(throttleTarget, 500) // throttleEffect从throttle中返回，持有词法作用域变量timerId和targetArgs的引用，进而形成闭包

为什么react会存在闭包陷阱

首先react在update的时候会重新执行Component（组件函数），进而生成新的词法作用域的变量。假如你存在会锁住某一过程中词法作用域的逻辑，就会产生闭包陷阱的问题。

typescript 复制代码

// 子组件
import React, { useState, forwardRef, Ref, useImperativeHandle, useEffect, useCallback } from "react";

export interface ItemRef {
	queryData: () => void
}

const Item = forwardRef((props: { value: number }, ref: Ref<ItemRef>) => {
	const [ value, setValue ] = useState(0)
	const queryData = () => {
		console.log("触发了防抖的函数", props, isEffect && "useEffect进入");
		setValue(props.value * 2);
	}
	const queryDataCallback = useCallback(queryData, []) // 因为只会在mountd的时候执行一次，所以queryDataCallback所持有的词法作用域永远是第一次的，所以调用queryDataCallback所触发的queryData所使用的词法作用域也理所应当是第一次的，所以props.value永远是0
	useEffect(() => {
		setInterval(() => {
			queryDataCallback(true);
		}, 1000)
	}, [])
	useImperativeHandle(ref, () => {
		return queryData // 同理，因为只会初始化的时候执行一次，所以保存的queryData的指针永远是第一次执行时生成的，因此保存的词法作用域也是第一次，因此执行的时候props.value也是0
	}, [])
})

// 父组件
import React, { useState, useRef, useEffect } from "react";
const Closure = () => {
    const [ count, setCount ] = useState(0);
    const itemRef = useRef<ItemRef>(null);
    const triggerControll = () => {
        setCount(count + 1);
    };
    useEffect(() => {
        itemRef.current?.queryData();
    }, [count]);
    return (
        <div>
            <button onClick={ triggerControll }>点击次数：{count}</button>
            <Item ref={ itemRef } value={count}></Item>
        </div>
    );
};

props在更新的时候也会生成一个新的指针指向新的对象，而非在原有对象上进行的修改，所以如果这里按照指针不变来获取最新的值的话，就会遇到隐藏的闭包陷阱的问题。

如何解决闭包陷阱

要避免闭包陷阱的产生，需要时刻注意所使用的词法作用域是不是旧的。上述两种情况处理的方式尽均可以修改成监听props.value的变化来生成信息的值

typescript 复制代码

// ... 此处省略Item的其它逻辑
const queryDataCallback = useCallback(queryData, [props.value]);
useEffect(() => {
    setInterval(() => {
        queryDataCallback(true);
    }, 1000);
}, [props.value]);
useImperativeHandle(ref, () => {
    return {
        queryData
    };
}, [props.value]);
// 此处省略Item的其它逻辑

这样就不会出现闭包陷阱的情况了