javascript - 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>

这是另一种使用钩子(Hook)的方式，但对我来说似乎很老套。

  <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 Hook (作为另一个答案已经提及):

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