React MUI Snackbar示例中function与箭头函数差异及报错问题

首先明确一个核心结论：仅将示例中的箭头函数赋值写法替换为function关键字声明写法，本身不会触发无限重渲染报错，你碰到的Too many re-renders错误本质是渲染阶段直接执行了修改state的逻辑，和两种函数的语法差异无关，大概率是你修改代码时误写了事件绑定逻辑导致的。
该报错的触发条件是组件渲染过程中直接调用了setOpen这类状态修改函数，触发状态更新后又再次进入渲染流程，形成无限循环。最常见的误写场景是把事件回调写成了立即执行的形式：比如onClick={handleClick()}，不管用哪种函数声明方式，这么写都会报错。 #

两者在普通事件回调场景下的使用效果几乎一致，仅存在以下几个细微差异：

• 变量提升规则不同
  用function关键字声明的函数存在变量提升，在组件作用域内任意位置都可以访问，哪怕你把函数定义写在return语句之后，事件绑定也能正常生效；而箭头函数属于表达式赋值，必须在绑定事件之前完成声明，否则会抛出变量未定义的引用错误。
• 递归场景易用性不同
  如果你的函数需要调用自身实现递归逻辑，function声明自带函数名标识，可以直接在函数内部调用自身；匿名箭头函数要实现递归需要额外绑定变量引用，写法更繁琐。
• this指向规则不同（该差异在函数组件中几乎无影响）
  箭头函数的this继承自外层作用域，而function声明的函数this指向调用方。但React函数组件内部默认处于严格模式，顶层this为undefined，所以在普通事件回调场景下两者的this表现没有区别。

你可以直接将提供的完整代码中的handleClick和handleClose替换为function声明写法，运行后不会出现任何报错，示例如下：

// 替换后完全可以正常运行
function handleClick() {
  setOpen(true);
};

function handleClose(event, reason) {
  if (reason === 'clickaway') {
    return;
  }
  setOpen(false);
};

如果替换后依然报错，建议检查事件绑定位置是否存在函数立即执行的写法。

内容的提问来源于stack exchange，提问作者engineer-x