react中函数带（）和不带（）引发的问题-白红宇的个人博客

发布日期：2021-05-20 10:06:54 浏览次数：43 分类：精选文章

本文共 580 字，大约阅读时间需要 1 分钟。

在一次使用react-ant-design-mobile组件的项目中，遇到了一个 Toast 回调函数无法正常执行的bug。经过仔细分析，最终找到了问题的根源——括号使用不当导致函数未正确执行。

为了实现 Toast 回调函数的正确使用，以下步骤是必须遵循的：

正确写法——去掉不必要的括号：

在调用 Toast.success 时，确保使用括号来执行回调函数。错误的写法会使回调函数立即执行，而不是在提示出现后进行操作。正确的代码如下：

Toast.success('发布成功', 1, this.onClose());
} 
onClose = () => {
    // 做相应的事情...
}

理解函数调用的概念：

函数调用的关键在于括号的使用。如果忘记加括号，函数不会被执行，而是函数的指针会被传递。在这种情况下，只有当括号被添加时，函数体代码才会执行，从而完成回调操作。

类似的问题在 React 开发中的体现：

回顾过去在 React 更换虚拟DOM时遇到的类似问题，这进一步提醒了我对函数调用的基础知识的重视，尤其是在处理异步操作和回调时。

通过以上调整，问题得以解决，确保了 Toast 提示的正确显示以及回调函数的执行。这个过程不仅巩固了对 React 组件开发的理解，也加深了对函数调用机制的认识，未来将更注意细节，避免类似问题再次发生。

上一篇：reduce方法实现对数组相邻相同元素进行合并

下一篇：react-ant-design实现可拖拽可编辑的表格功能

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！