React 中 onClick 接收函数与 HTML 和 Vue 中的区别

React

无参

直接传入函数本身。

<div onClick={doClick}>点击</div>

有参

需要使用() => {}封装一层。

<div onClick={() => doClick('参数')}>点击</div>

错误用法

直接使用函数名传入参数，实际得到的是函数返回值，但onClick要求是一个函数对象，不是函数返回值。

所以在TypeScript会得到TS2322这个错误。

<div onClick={doClick('参数')}>点击</div>

HTML/Vue

HTML

直接使用函数名传入参数，能正常工作。

<div onClick="doClick('参数')">点击</div>

浏览器底层会帮忙转成addEventListener，包装一层。

div.addEventListener('click', function() {
    doClick('参数');
})

Vue

直接使用函数名传入参数，也能正常工作。

<div @click="doClick('参数')">点击</div>

Vue编译后会转成

createElement('div', {
    on: {
        click: () => doClick('参数')
    }
})