React函数组件中外部声明变量值丢失问题求助

问题原因 #

组件每次重渲染时，组件函数会重新执行，你定义的let animation = null;会被重新初始化，之前通过animationRef赋值的引用会被覆盖成null，这就是重渲染后它变回null的核心原因。

解决方案：用useRef替代普通变量 #

React的useRef Hook专门用来保存跨渲染周期的可变值，它的.current属性不会随组件重渲染而重置。修改代码如下：

import { useRef } from 'react';

// 创建持久化的引用容器
const animation = useRef(null);

const animationRef = (ref) => {
    console.log(ref);
    animation.current = ref;
};

后续访问时直接使用animation.current即可，无论组件是否重渲染，这个值都会保持最新的引用，包括在matter.js的Events事件处理器中也能正常访问。

为什么原写法失效？ #

普通变量属于组件函数的局部作用域，每次组件因state、props变化重渲染时，函数会从头执行，变量会被重新声明并赋值为null，之前的赋值自然丢失。而useRef创建的对象是React在组件挂载时生成的，整个生命周期内都是同一个对象，.current属性可自由修改且不会被重置。

内容的提问来源于stack exchange，提问作者NoelHug