為什么要在函數ReactJS中使用函數？

Question

ReactJS文檔中有這段代碼：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

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

例如為什么為什么不能做這樣的事情：

function handleClick(){
    console.log("The component was clicked");
}

function Component(props){
    return <a href="#">Click me</a>
}



ReactDOM.render(<Component onClick={handleClick}/>, document.getElementById('root'));

有人可以幫助我理解為什么必須有兩個功能，或者將我的方向告訴初學者嗎？

Answer 1

第二個版本不起作用，因為onClick on Component將被解釋為prop，而不是事件處理程序。 您可以這樣解決：

function handleClick(){
    console.log("The component was clicked");
}

function Component(props){
    return <a href="#" onClick={handlerClick}>Click me</a>
}

ReactDOM.render(<Component />, document.getElementById('root'));

現在，為什么不使用兩個函數而不是一個內部帶有處理程序的主函數？ 可以，但是此版本缺少代碼封裝。 第一個版本中的ActionLink是一個具體的單元，體現了所需的一切，而在第二個片段中，沒有附加的handleClick函數， Component基本上是無用的。

Answer 2

ActionLink是組件/類類型。 它允許對該鏈接所需的所有行為進行封裝和代碼重用。 如果它是一個自由功能，則將失去該OO設計承租人。