使用react-hooks在每个渲染上创建处理程序的性能损失

Question

目前，我对新的react hooks API
的用例以及您可能会做的事情感到非常惊讶。

实验时出现的一个问题是，总是创建一个新的处理函数仅在使用时就扔掉是多么昂贵useCallback。

考虑以下示例：

const MyCounter = ({initial}) => {
    const [count, setCount] = useState(initial);

    const increase = useCallback(() => setCount(count => count + 1), [setCount]);
    const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]);

    return (
        <div className="counter">
            <p>The count is {count}.</p>
            <button onClick={decrease} disabled={count === 0}> - </button>
            <button onClick={increase}> + </button>
        </div>
    );
};

尽管我将处理程序包装为，useCallback以避免每次渲染新处理程序时都会传递新的处理程序，但仍然必须创建内联箭头函数，而在大多数情况下都必须将其丢弃。

如果我只渲染几个组件，可能没什么大不了的。但是，如果我这样做数千次，对性能的影响有多大？有明显的性能损失吗？避免这种情况的方法是什么？可能是仅在必须创建新处理程序时才调用的静态处理程序工厂？

Answer 1

该 阵营常见问题 给它提供一个解释

挂钩是否由于在render中创建函数而变慢？

不。在现代浏览器中，闭包的原始性能与类相比没有什么显着差异，除非在极端情况下。

此外，请考虑Hooks的设计在几种方面更有效：

挂钩避免了类所需的大量开销，例如在构造器中创建类实例和绑定事件处理程序的开销。

使用Hooks的惯用语代码不需要使用高阶组件，渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用较小的组件树，React要做的工作更少。

传统上，与React中的内联函数有关的性能问题与子组件中的ComponentUpdate优化如何在每个渲染中断处传递新的回调有关。挂钩从三个方面解决了这个问题。

因此，钩子提供的总体收益远大于创建新功能所带来的损失

此外，对于功能组件，您可以通过使用进行优化，useMemo以便在其道具没有变化的情况下重新渲染组件。