ReactJs：定义事件处理程序的最佳实践

Question

最近我开始使用ReactJs，想了解在React中定义事件处理程序的最佳实践。以下是我一直在使用的React事件处理程序：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const handleButtonClick = () => {
    setCounter(counter + 1);
  };
  return (
    <div className="App">
      <button onClick={() => handleButtonClick()}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

我也听到过反对这种逻辑的观点。有人认为最好在组件定义之外（例如我们的App）定义事件处理程序。这样，它变得清晰、简洁，而不是在组件内创建多个函数（无论是事件处理程序还是其他函数）造成混乱。例如：

import React, { useState } from "react";
import "./styles.css";

const handleButtonClick = (setCounter, counter) => () => {
  setCounter(counter+1);
};

export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <button onClick={handleButtonClick(setCounter, counter)}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

第二种方法的CodeSandbox链接 我想知道定义函数的最佳实践是什么？事件处理程序是否也应在函数组件（此例中为App组件）上方全局定义？

- Sagnik Chaudhuri

---

第二个也是错误的实现。它会进入无限循环。我的看法是，如果组件只有一个或两个函数，则内联是可以的，但如果超过两个，则始终要在render/return之上创建一个函数，因为这样不会创建函数副本。对于“functional”组件，请使用“useCallback”。 - Shubham Verma

@ShubhamVerma，看起来不会进入无限循环。已编辑并粘贴了相应的codesandbox链接。 此外，在任何情况下，函数都是在render/return之上创建的。只想知道是否要在组件定义之上定义它。 - Sagnik Chaudhuri

Answer 1

事件处理程序也应该在函数组件上面全局定义吗？

不应该。

在组件外面定义修改组件状态的事件处理程序会破坏 内聚性。

在组件内部定义事件处理程序可以解释组件的不同交互。仅有一个“包装器”处理程序会破坏 单一抽象层次。

以上是我的个人看法。

- Joseph D.

Answer 2

你不需要在onClick内创建额外的函数，只需不调用它。当触发onClick时，将调用onClick方法。

const handleButtonClick = () => {
  setCounter(counter + 1);
};  // return function

<div onClick={handleButtonClick} />
// it will be call the handleButtonClick
// when onClick is trigger

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const handleButtonClick = () => {
    setCounter(counter + 1);
  };
  return (
    <div className="App">
      <button onClick={handleButtonClick}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

- saidfurkandize