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道具在每个渲染器上都有新值，并触发子组件的重新渲染-即使它是纯组件。根据特定的组件，这可能会或可能不会导致性能问题。如果有许多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>

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

2 个答案: