React Hooks 中用于传递参数的点击事件的语法是什么

Question

这在 React 类组件中对我来说总是很好用：

let myValue: string = "Hello World";
<Button onClick={this.handleClick.bind(this, myValue)}></Button>

我在 React Hooks 文档中找到了这种语法，我喜欢它，但它并不总是传回一个值：

<Button onClick={handleClick} value={myValue}></Button>

此语法有效，但很难键入并且看起来很混乱：

<Button onClick={() => handleClick(myValue)}></Button>

这是另一种使用钩子的方式，但对我来说似乎很笨拙。

  <Button onClick={handleClick.bind(null, myValue)}></Button>

我对太多的选择感到困惑。 难道没有一些最佳实践方法可以做到这一点吗？

Answer 1

这是完全合适的方法：

<Button onClick={() => handleClick(myValue)}></Button>

唯一的缺点是onClick prop 在每个渲染上都有新的价值，并触发子组件的重新渲染 - 即使它是纯的。这可能会导致也可能不会导致性能问题，具体取决于特定组件;如果有许多Button实例或其重新渲染成本高昂，这将是一个问题。

如果值是静态的，则可以将回调定义为组件外部的常量函数：

// outside function component
const myValue = "Hello World";
const myHandleClick = () => handleClick(myValue);
...
// inside function component
<Button onClick={myHandleClick}></Button>

如果一个值是动态的并且仅在组件内部可用，则可以在组件内部定义一个函数，并使用useMemo或useCallback钩子进行记忆(正如另一个答案已经提到的(：

// inside function component
const myHandleClick = useCallback(() => handleClick(myValue), [myValue]);
...
<Button onClick={myHandleClick}></Button>

Answer 2

您问题中的第一个和最后一个版本都创建了一个新函数，所以如果你可以侥幸将函数handleClick给一个道具，你应该这样做。

如果需要将参数传递给函数，您仍然可以在函数组件中使用第一个版本，但由于不使用this，您可以将其设置为 null 。

<Button onClick={handleClick.bind(null, myValue)}></Button>