React Native生产构建下箭头函数失效 改用普通函数正常问题咨询

核心诱因 #

该问题是JavaScript变量提升规则、React Native生产打包压缩逻辑、Formik异常处理机制三者共同作用的结果：

• 普通function声明的函数属于函数提升，在当前作用域初始化阶段就会完整创建函数引用，无论声明位置写在调用点之前还是之后，调用时都能正常拿到可执行的函数引用。
• 你使用的箭头函数是通过const关键字声明的变量，属于变量提升，仅会提升变量的声明，不会提升赋值操作。如果你的箭头函数定义位置在Formik组件的onSubmit调用逻辑之后，生产打包时就会出现调用时forget还未完成赋值的情况，相当于调用了undefined，逻辑自然不会执行。

为什么调试模式正常 #

调试模式下Metro打包器不会做激进的代码顺序优化、死代码消除等操作，所有变量按代码书写顺序依次初始化，不管是箭头函数还是普通函数都能正常拿到引用，因此不会触发问题。

为什么没有报错 #

Formik的onSubmit回调默认会捕获内部执行的所有异常，你调用未赋值的forget抛出的类型错误被直接吞掉，不会出现红屏提示，只会表现为对应逻辑不执行。

补充验证方案 #

你可以尝试把箭头函数的定义位置挪到Formik组件渲染代码的前面，生产打包后也能正常运行，和改用普通函数的效果一致。

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