我应该使用事件委托，以经济与js事件在即表单元级别?

Question

如果我有一个表，我想对表单元格事件作出反应，是更好地将事件放在表元素上，并在closest("td")的帮助下处理单元格特定事件，还是可以将事件放在表单元格上?(我说的是包含大量单元格的表，所有单元格都是可见的。)

// pseudo react-code
return (
<table onClick={handleCellClick}>
<tr>
<td>...</td><td>...</td><td>...</td><td>...</td>
</tr>
//...
</table>
)

或

// pseudo react-code
return (
<table>
<tr>
<td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td>
</tr>
//...
</table>
)

Answer 1

既然你问的是React:不，你不需要只在表上放一个事件处理程序，React已经为你做了事件委托。因此，使用<td onClick={…}>可能要简单得多，特别是当您使用嵌套组件时。

Answer 2

在不知道单击处理程序要做什么的情况下，这里有一个使用事件委托和数据属性的示例，以显示如何识别单个单元格。

const { useState } = React;
function Example() {
function handleClick(e) {
if (e.target.matches('td')) {
const { dataset: { id } } = e.target;
console.log(id);
}
}
return (
<table onClick={handleClick}>
<tr>
<td data-id="1-1">1-1</td>
<td data-id="1-2">1-2</td>
<td data-id="1-3">1-3</td>
<td data-id="1-4">1-4</td>
</tr>
<tr>
<td data-id="2-1">2-1</td>
<td data-id="2-2">2-2</td>
<td data-id="2-3">2-3</td>
<td data-id="2-4">2-4</td>
</tr>
</table>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);

table { border-collapse: collapse; bordeR: 1px solid #565656; }
td { padding: 0.44em; border: 1px solid #dfdfdf; }
td:hover { cursor: pointer; background-color: #ffff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 3

结论是，在普通JavaScript中，事件委托是首选的解决方案，以避免内存和性能问题。如果你正在使用像React.js这样的JavaScript前端库，或者像Ember、Angular这样的框架……你必须阅读文档并检查事件是如何管理的。在React.js的情况下，实现自定义事件委托是不必要的，因为React.js为你做了这个优化。