需要了解使用react FC的内联函数调用

Question

我是React的新手，在我的公司创建了一个新的视图。我使用内联函数，因为许多指南都是这样做的。所有内容都被写成功能组件。

我这样写点击：

onClick: () => onBackClick()

我的同事们说这是一个没有我们的箭头函数。

我会尽力给你完整的画面。父组件具有声明为的onBackClick函数

const Parent = () => {
const onBackClick = () => {backOff}

<Child {...{onBackClick}}/>
}
const Child = ({onBackClick}) => {
return (
<MyButton {...{onClick: () => onBackClick() }}/>
)

}

我的同事希望我这样写：

onClick: onBackClick

我没有得到很好的解释为什么，我真的很想学习。有人能解释一下为什么这是一种更好的写作方式吗？

谨致问候。

Answer 1

比较：

const onBackClick = () => { console.log("This does something useful"); };
const onClick = onBackClick;
onClick();

const onBackClick = () => { console.log("This does something useful"); };
const onClick = () => onBackClick();
onClick();

在第一个例子中(你的同事的方式(，有一个函数，它被传递。

在第二个示例中(按照您的方式(，您创建了一个全新的函数，该函数除了调用第一个函数之外什么都不做。

---

除了冗余之外，这在React中造成了额外的低效率。

重新渲染组件时，会检查输出是否有更改。

onBackClick可能没有改变，但(当使用您的方式时(onClick已经改变了，因此React将从DOM中删除旧的事件处理程序，并使用您创建的新(但相同(onClick函数分配一个新的。