javascript - 在 ReactJS 中使用 onClick 的 href

Question

根据 Reactjs.org 处理事件并防止默认使用以下代码:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

但是，这也需要在构造函数中添加绑定(bind)，例如:

this.handleClick = this.handleClick.bind(this);

我能够通过以下代码获得所需的行为:

<span>
  <a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>

问题:哪个更好？似乎第一个需要使用有状态组件，而第二个选项可以执行这些操作，而不管组件是有状态的还是无状态的。

Answer 1

两种选择产生几乎相同的结果。由于 ActionLink 是一个无状态组件，handleClick 将被重新创建并重新分配 onClick。如果你想获得最好的性能，你可以使用一个类，像这样:

class ActionLink extends React.Component () {
  handleClick = (e) => {
    e.preventDefault();
    console.log('The link was clicked.');
  };

  render() {
    return (
      <a href="#" onClick={this.handleClick}>
        Click me
      </a>
    );
  }
}

在这个例子中。 handleClick 只绑定(bind)一次，只会执行 render 方法。如果愿意，您还可以在构造函数中绑定(bind) handleClick。但差异是如此之小，我建议您使用您喜欢的那个，您会发现它更清楚。