React Js 最佳实践——onClick 事件答案

【问题标题】：React Js best practice - onClick eventReact Js 最佳实践——onClick 事件
【发布时间】：2022-01-14 19:40:42
【问题描述】：

我使用了 3 种不同的场景来使用 onClick 事件调用函数，但我不确定我应该坚持哪一个，我将通过一个基本示例来演示我的问题，但让我们想象一下我们的 tFunction 比更新一个更复杂状态。

const [state, setState] = useState("");

第一种情况：

const tFunction = (e) => {
const tValue = e.target.getAttribute("name");
setState(tValue)};

<button name={"some data"} onClick={tFunction}>Press me</button>

第二个场景：

  const tFunction = (value) => {setState(value)};

  <button onClick={() => tFunction("some data")}> Press me </button>

第三种情况：

  <button onClick={() => setState("some data")}> Press me </button>

我的问题是：我应该始终遵循的最佳方案是什么？

demo

【问题讨论】：

在您的第 2 和第 3 个场景中，value 是什么？它没有定义
非挂钩相关：Binding vs Arrow-function (in JavaScript, or for react onClick)。也就是说，这里的代码 sn-ps 与 Ba2sik 提到的并不明显相似，它们也不是有效的 JS。请分享可运行的、工作的 sn-ps。
我只用一个文本替换 value 来更新状态。我提供了一个演示。

标签： javascript reactjs

【解决方案1】：

在渲染中使用箭头函数每次都会创建一个新函数组件渲染，这可能会破坏基于严格的优化身份比较。

（来自 React 文档：https://reactjs.org/docs/faq-functions.html）

因此，你应该去第一种情况。

【讨论】：

【解决方案2】：

第一个场景让你的代码运行得更快，并且可以重复用于其他按钮，所以我建议第一个场景

【讨论】：