React函数组件如何更新eventlistener绑定函数并获取最新props与内部变量

问题根因 #

• 核心是React函数组件的闭包陷阱：你使用了空依赖的useEffect，仅在首次渲染时绑定mousemove事件，绑定的onHover函数是首次渲染闭包中的版本，内部捕获的永远是首次渲染时的props.value和局部变量值，后续渲染更新的props和新的局部变量无法被这个旧闭包访问。
• 你用普通let声明的局部变量variableNeededInOnHover会在每次组件重渲染时重新初始化，你在首次渲染的useEffect中给它赋值，仅对首次渲染的变量生效，后续渲染的该变量会重置为初始值null，所以永远拿不到更新后的值。

解决方案：用useRef存储跨渲染的最新值 #

这是性能最优、实现最简单的方案，不需要频繁解绑重绑事件监听器，利用useRef的current属性可变、且所有渲染共享同一引用的特性，存储所有需要在事件回调中访问的最新值。

import { useEffect, useRef } from 'react';

function FunctionalComp(props){
    // 初始化ref，统一存储需要在事件回调中访问的所有值
    const latestValuesRef = useRef({
        propsValue: props.value,
        variableNeededInOnHover: null
    });

    // 每次渲染都更新ref内容，保证永远存储最新值
    latestValuesRef.current = {
        propsValue: props.value,
        variableNeededInOnHover: latestValuesRef.current.variableNeededInOnHover
    };

    useEffect(()=>{
        // 给自定义变量赋值直接修改ref的current属性即可
        latestValuesRef.current.variableNeededInOnHover = "Non Null Value";
    }, []);

    useEffect(()=>{
        // 事件回调直接写在useEffect内部，避免额外依赖
        function onHover(event) { 
            console.log(latestValuesRef.current.propsValue); // 永远拿到最新的props.value
            console.log(latestValuesRef.current.variableNeededInOnHover); // 永远拿到最新的自定义变量值
        }
        window.addEventListener("mousemove", onHover, true);
        return () => {
            window.removeEventListener("mousemove", onHover, true);
        }
    }, []); // 依赖保持为空，事件仅绑定一次
    
    return ( <div>{props.value}</div> )
}

方案说明 #

• ref的current属性不会触发组件重渲染，且所有渲染共享同一个引用，不存在闭包捕获旧值的问题
• 不需要修改事件绑定的依赖数组，避免频繁绑定解绑事件带来的性能损耗
• 所有需要跨渲染保留、需要在事件回调中访问的变量都可以存在这个ref中，不需要额外声明多个状态

内容的提问来源于stack exchange，提问作者Jani S.