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

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

您问题中的第一个和最后一个版本都创建了一个新函数，因此如果您可以只将该函数提供handleClick给一个 prop，那么您应该这样做。

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

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

Answer 2

这是执行此操作的完全合适的方法：

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

唯一的缺点是onClickprop在每个渲染上都有新的值，并触发子组件的重新渲染-即使它是纯的。根据特定的组件，这可能会或可能不会导致性能问题。如果存在许多Button实例或它们的重新渲染很昂贵，这将是一个问题。

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

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

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

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