在 React Effect Hook 中使用箭头函数是否存在任何性能问题？

Question

React 在他们的最新提案中引入了 Hooks。 Effect Hook 采用一个函数和一个数组，如下所示：

useEffect(() => {
    document.title = `${unRead} notifications`
}, [unRead])

React 是 intentional using an arrow function。这意味着每次调用 Effect Hook 时都会创建一个新函数。

考虑到一个组件可以有很多 Effect Hooks，这对性能有什么影响吗？

Answer 1

This means that a new function is created every time the Effect Hook is called.

因此创建了一个新数组，[unRead]。这对数组和函数都不是问题。与其他对象类似，函数在现代 JS 引擎中的创建速度非常快。新创建的函数对性能的影响可以忽略不计。

如果函数被重用，可能会有一些性能改进，具体取决于引擎：

// outside a component
const effect = () => {...};

...
// inside a component
useEffect(effect);

对

useEffect(() => {...});

但由于效果通常依赖于封闭范围（例如 useState 状态），效果函数的重用可能是不切实际的。

关于 arrow 函数，预计箭头函数和常规函数之间没有性能差异，尽管箭头在某些引擎（例如较旧的 Firefox 版本）中可能存在性能问题。

Does this have any effect on the performance, considering the fact that a component can have many Effect Hooks?

如果经常调用组件函数导致性能问题，这就是实际问题。

Is there any performance issue related to using arrow function in React Effect Hook?