javascript - 传递调用函数的 => 而不是仅仅传递函数本身

Question

我正在给自己上一些 JavaScript 速成类，这样我就可以学习 React。我已经很多年没有做过任何开发工作了，所以这可能是一个面面相觑的时刻。

我正在阅读一篇关于 useState() 的博文。我理解如果传递给 useState() 的参数是一个函数，则该函数仅在第一次渲染执行时执行。

(编辑:博客文章在这里 https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/ )

然而，这让我感到困惑:

const Message= () => {
   const messageState = useState( () => expensiveComputation() );
   /* ... */
}

在这个例子中，为什么不像这样将 expensiveComputation 传递给 useState()？

const Message= () => {
   const messageState = useState( expensiveComputation );
   /* ... */
}

还有一些关于 Javascript 函数的奇怪问题，我认为我没有理解。例如，我听说箭头函数在定义时执行，但我玩过 JSBin，但我无法以任何方式向自己证明这一点。

感谢您的帮助!

Answer 1

我认为在这个特殊情况下这些是相同的。更普遍的问题是 this 的绑定(bind)。

() => this.foo()

和

this.foo

不一样，因为“this”在第一种情况下仍然依附于类，在第二种情况下丢失，所以当“foo()”在第二种情况下被调用时，它不会访问正确的对象作为它的“this”。

this 很容易丢失，这被普遍认为是Javascript 的一个重大设计错误。保留 this 的旧 JS 方法是使用 bind 方法，即 this.foo.bind(this)。但是在语言设计中，重新定义代码的意义，而不破坏大家现有的应用是不可能的。当引入带有 => 的 lambda 时，this 以保留 this 的更现代的词法方式处理。