最近,我一直致力于一个包含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实施更好的解决方案吗?
答案 0 :(得分:5)
React在其合成事件系统中使用事件委派(如jquery.on()
)来解决相同的性能问题 - 请参阅Under the Hood: Autobinding and Event Delegation。
此外,事件系统是反应组件的组成部分。如果您要使用外部事件,则必须以某种方式将其连接到当前组件以使用.setState
或通过{{1}调用来自组件父级的回调}。