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

Question

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

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

React 是有意使用箭头函数的。这意味着每次调用 Effect Hook 时都会创建一个新函数。

考虑到一个组件可以有许多效果挂钩这一事实，这对性能有什么影响吗？

score 2 · Accepted Answer

这意味着每次调用 Effect Hook 时都会创建一个新函数。

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

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

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

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

对比

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

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

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

考虑到一个组件可以有许多效果挂钩这一事实，这对性能有什么影响吗？

如果组件函数被频繁调用而导致性能问题，这就是实际问题。

1 回答 1