与 jQuery 的 .on("click") 方法相比，在 React 组件中使用 onClick 有什么优势？

Question

最近我一直在做一个任务管理项目，它的依赖项包括 React 和 jQuery。用户可以查看动态添加的任务的每日列表，这些任务要么通过 AJAX 从远程服务器加载，要么由用户通过“新任务”控件创建。任务列表呈现在 HTML 页面中存在的父 <section> 元素中。

以下是用户可以对任务执行的一些可能的操作：

• 编辑任务描述
• 添加有关对任务执行的操作的注释
• 将任务标记为已完成
• 将任务重新安排到新的截止日期

每个操作都是通过单击其对应的<button> 元素来启动的。执行这些操作时，用户可以确认他们的操作以提交更改或取消并恢复到任务的原始状态。这些确认和取消控件也可以通过单击按钮来触发。

总而言之，每个任务包含多达 12 个按钮控件，因此添加了 12 个单击事件绑定。我知道我可以在我的 React 组件类中编写函数来执行该操作，并且我可以通过在我的渲染函数的 <button> 元素中包含一个 onClick 属性来使用 React 调用这些函数：

var AddNoteConfirm = React.createClass({
    handleClick: function() {
        // logic to save the added note...
    },
    render: function() {
        return (
            <button className="addNote-confirm" onClick={this.handleClick}>
                Save Note
            </button>
        );
    }
});

但是假设我一次渲染 50 个任务。这将创建 600 事件绑定。

使用 jQuery 的 .on() 方法我只需要执行 12 事件绑定，因为我可以绑定到父 <section> 容器并将给定按钮的选择器作为参数传递：

$('#task-container').on('click', '.addNote-confirm', function() {
    // logic to save the added note...
});

由于这种策略大大减少了事件处理程序的数量，jQuery 实现的事件处理难道不是更好、更具可扩展性的选择吗？或者也许我忽略了一些东西。是否还有其他原因可以说明 React 实现会是更好的解决方案？

Answer 1

React 在其合成事件系统中使用事件委托（如 jquery.on()）来解决相同的性能问题 - 请参阅 Under the Hood: Autobinding and Event Delegation。

此外，事件系统是反应组件的一个组成部分。如果要使用外部事件，则必须以某种方式将其连接到当前组件以使用 .setState 或通过 props 调用来自组件父级的回调。