React中通过回调从子组件访问父组件state的运行原理疑问

运行原理核心是JavaScript的闭包特性 #

这个逻辑能正常运行和React框架本身没有直接关联，本质是JavaScript的函数闭包机制在生效：

• 你在父组件内部定义的匿名回调() => { setInEditMode(false); }，在创建时就绑定了自身的词法作用域，这个作用域就是父组件的函数作用域
• 该作用域本身就有权限访问setInEditMode方法，后续无论这个函数被传递到哪个位置、在哪个上下文里被调用，都可以正常访问自身创建时所在作用域内的变量和方法

你之前的认知存在偏差：并不是函数内部的所有变量都会按引用传递，而是函数本身会「记住」自己定义时所在的作用域，调用时会优先从这个绑定的原始作用域查找变量，而非从调用位置的作用域查找。

对应到你的代码场景：父组件传递给子组件的onCancel，本质是把绑定了父组件作用域的函数引用传给了子组件。子组件只是拿到了这个函数的引用并触发调用，完全不需要自己拥有setInEditMode的访问权限——函数实际执行的逻辑还是在父组件的作用域下运行，修改的也自然是父组件的state。

你可以参考下面这个极简的原生JS示例理解逻辑，和你的React代码运行逻辑完全一致：

function parent() {
  const innerValue = "来自父作用域的内容";
  // 定义绑定父作用域的回调
  const callback = () => console.log(innerValue);
  // 将回调传入子函数
  child(callback);
}

function child(callbackFromParent) {
  // 子函数作用域内没有定义innerValue，但依然可以正常调用回调拿到结果
  callbackFromParent(); // 输出：来自父作用域的内容
}

parent();

这种方式也是React生态里子组件向父组件通信、修改父级状态的标准实现方案，子组件只需要负责触发回调，不需要关心状态的归属和具体修改逻辑，所有状态控制逻辑都收敛在状态所属的父组件内部，可维护性更高。

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