小编Sim*_*gel的帖子

最近我一直致力于一个包含React和jQuery的依赖项的任务管理项目.用户可以查看动态添加任务的每日列表,这些任务可以通过AJAX从远程服务器加载,也可以由用户通过"新任务"控件创建.任务列表将呈现为<section>HTML页面中存在的父元素.

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

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

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

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

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

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

由于使用此策略大大减少了事件处理程序的数量,事件处理的jQuery实现不是更好,更具伸缩性的选项吗？或许我忽略了一些东西.React实施是否是更好的解决方案还有其他原因吗？