React的JSX事件绑定的一个注意点

大家好，我是南宫。

我之前一直是用vue的，结果2月28日那天突然给我一套React的代码，让我基于这套代码来开发新的功能，也需要根据需求修改一些原有的功能，时间只给两周，而我完全没学过React，我简直是要裂开了。

当然，最后两周结束的时候，我基本完成了任务。

（这里插播一段，没心情看的同学可以跳过一下）

那两周是从零开始学习React（我一直在内心对自己说：这不是真正的零基础，你有3年开发经验，而且有一定的js基础，也有vue的经验和概念），用几天时间快速过了一下React的官方文档，跟着敲了写代码，做了一点点笔记，然后又去看了antd、Redux、dva的文档，到这里已经过去4天了，我才开始看源码。然后去请教大佬，然后又过了两天，我才看懂这套代码里面的接口调用的流程。那个时候每天晚上10点下班，是真的辛苦。

好，言归正传。

之前用Vue的时候，我一直用的.vue来写组件，直到今年二月我才学到了JSX。所以如果让我写事件绑定，我肯定是：<el-button @click="xxx(yy)"></el-button>

也就是说，如果事件绑定的时候需要传参数，我习惯于直接在函数名后面加括号，就直接传入。

这样写在React组件上会出大问题的。

昨天我改了个按钮上的事件绑定，我认为这两个按钮的功能类似，可以共用一个处理函数，传不同的参数即可。然后我就写成了:

<AuthButton perms="system:authen:disable">
   <Button
      style={{ marginLeft: 20 }}
      type="primary"
      onClick={this.enableClick(true)}
   >
      批量启用
   </Button>
</AuthButton>

然后我就抓狂了——为毛我随便点击一下页面上的按钮，都会触发一些奇奇怪怪的东西呢？然后我在enableClick函数里加了console.log，就发现“奇奇怪怪的东西”就包括了执行这个函数。

我感觉好魔幻哦，本来以为问题是这里不能传参数，排查了半小时，才反应过来，问题是，这里不能加括号啊。

那如果真的想在事件处理函数这里传入不同的实参，要怎么办呢？——可以在这里写一个箭头函数，然后在箭头函数里调用你准备的函数，在调用的时候传入你想要的参数，像下面这样：

<AuthButton perms="system:dict:disable">
   <Button
      style={{ marginLeft: 20 }}
      type="primary"
      onClick={() => {this.enableClick(true)}}
    >
      批量启用
    </Button>
</AuthButton>

为什么呢？为什么像前面那样写，随便点击一个按钮，就会触发奇奇怪怪的东西呢？

难道是事件冒泡吗？——不是的，我原本以为那些动作是在组件外层被点击的时候会进行的操作，直到我注意到，我一进入这个页面，还没有点击按钮的时候也会执行这些，所以这个跟事件关系不大。

那就是在页面刚开始进入的时候会做一次，有的时候点击了按钮，触发了某种改变，也会做一次的事情——所以是渲染render的时候执行了这些操作！

没错，页面一进来会做一次渲染，展示出一开始的样子；在数据改变的时候，比对过VNode后页面重新渲染，显示新的数据。渲染的过程中，会对JSX这里的数据做绑定，所以如果写 <Button onClick={this.enableClick(true)}> 批量启用 </Button>，会在渲染时先去执行里面的this.enableClick(true)，然后把返回值作为onClick绑定的值。也就是，每一次渲染的时候，都会自动地执行this.enableClick(true)。

如果是写成<Button onClick={() => {this.enableClick(true)}} > 批量启用</Button>则意味着，每次渲染都创建一个新的箭头函数，然后赋值给onClick，点击的时候会调用这个箭头函数，箭头函数调用我准备好的函数，传入我需要的值。