Question

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

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

编辑任务说明
添加有关对任务采取的操作的说明
将任务标记为已完成
将任务重新安排到新的截止日期

通过单击相应的<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 事件绑定。

使用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或通过{{1}调用来自组件父级的回调}。

使用jQuery的.on（“click”）方法在React组件中使用onClick有什么好处？

1 个答案: