能否将事件处理器中的变量作为Props传递？事件处理器作用域疑问

先贴出你提供的代码：

export default function test(){
    let a;
    let b;
    function handleEvent() {
        a = 2;
        b = 5;
    }
    return(
        <>
        <Testing a={a} b={b} />
        </>
    )
}

1. 能否将变量a和b作为Props传递给Testing组件？ #

语法上完全允许这么传递，但存在功能局限：

• 初始状态下a和b是undefined，会被正常传递给Testing组件；
• 当handleEvent触发修改a和b的值后，由于这两个是普通JavaScript变量，并非React状态变量（比如useState创建的），test组件不会触发重新渲染，Testing组件也无法接收到更新后的a和b值。
  如果想要实现变量更新后组件自动同步最新值，需要把a和b改为React状态，示例代码如下：

import { useState } from 'react';

export default function test(){
    const [a, setA] = useState();
    const [b, setB] = useState();
    function handleEvent() {
        setA(2);
        setB(5);
    }
    return(
        <>
        <Testing a={a} b={b} />
        </>
    )
}

2. 所有事件处理器是否相互独立？即能否在事件处理器外部使用其内部的变量？ #

• 事件处理器的内部作用域是完全独立的：如果在handleEvent内部定义局部变量（比如function handleEvent() { let c = 3; }），这个c只能在handleEvent内部访问，外部（比如test函数的其他代码）无法获取；
• 事件处理器可以通过闭包访问外层作用域的变量，比如这里handleEvent能修改外层的a和b，这是正常的闭包特性；
• 多个同作用域下的事件处理器，会共享外层变量，但各自的内部局部变量完全隔离，互相也无法访问对方的内部变量。

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