reactjs - 将状态 Prop 传递给 onClick 函数是最佳做法吗？

Question

有区别吗？我的猜测是基于 setProp 如何传递函数来保持准确性，但我无法在文档中找到答案。

  const [prop, setProp] => useState(value);

  const myFunction = (param) => {
    console.log(param)
  }

  return (
    <div onClick={()=> myFunction(prop)}></div>
  )

对比

  const [prop, setProp] => useState(value);

  const myFunction = () => {
    console.log(prop)
  }

  return (
    <div onClick={myFunction}></div>
  )

Answer 1

两个代码示例之间有一个主要区别。

在第一个代码示例中，每次重新渲染都会创建 2 个函数

• 传递给 onClick 属性的匿名函数
• 我的函数

而在第二个代码示例中，只创建了 1 个函数，即 myFunction

除此之外，没有区别，因为在组件的任何特定渲染中，prop 的值不会改变。因此，无论您是将 is 作为参数传递还是直接从 myFunction 内部访问它都没有区别。

作为旁注，您应该为状态变量选择不同的名称，因为它可能会与 props 对象混淆。