使用react-hooks在每个渲染上创建处理程序的性能损失 [英] Performance penalty of creating handlers on every render with react-hooks

问题描述

我现在对新的react hooks API的用例感到非常惊讶以及您可能会做什么.

I'm currently very amazed about the use cases of the new react hooks API and what you can possibly do with it.

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

A question that came up while experimenting was how expensive it is to always create a new handler function just to throw it away when using 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中，以避免每次渲染新处理程序时都会向下传递一个新的处理程序，但仍然需要创建内联箭头函数，而在大多数情况下都必须将其丢弃.

Although I'm wrapping the handler into a useCallback to avoid passing down a new handler every time it renders the inline arrow function still has to be created only to be thrown away in the majority of times.

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

Probably not a big deal if I only render a few components. But how big is the impact on performance if I do that 1000s of times? Is there a noticeable performance penalty? And what would be a way to avoid it? Probably a static handler factory that only gets called when a new handler has to be created?

推荐答案

The React FAQs provide an explanation to it

由于在渲染器中创建函数，钩子变慢了吗?

不.在现代浏览器中，与之相比，闭包的原始性能 除了极端情况外，课程的差异不大.

No. In modern browsers, the raw performance of closures compared to classes doesn’t differ significantly except in extreme scenarios.

此外，考虑到挂钩的设计在 几种方法:

In addition, consider that the design of Hooks is more efficient in a couple ways:

钩子避免了类所需的大量开销，例如成本 在创建类实例和绑定事件处理程序的过程 构造函数.

Hooks avoid a lot of the overhead that classes require, like the cost of creating class instances and binding event handlers in the constructor.

使用Hooks的惯用代码不需要深层组件树 在使用高阶代码库中普遍存在的嵌套 组件，渲染道具和环境.对于较小的组件树， React要做的工作较少.

Idiomatic code using Hooks doesn’t need the deep component tree nesting that is prevalent in codebases that use higher-order components, render props, and context. With smaller component trees, React has less work to do.

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

Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks shouldComponentUpdate optimizations in child components. Hooks approach this problem from three sides.

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

So overall benefits that hooks provide are much greater than the penalty of creating new functions

此外，对于功能组件，您可以通过使用useMemo进行优化，以便在组件的属性不变时重新渲染组件.

Moreover for functional components, you can optimize by making use of useMemo so that the components are re-rendering when there is not change in their props.

这篇关于使用react-hooks在每个渲染上创建处理程序的性能损失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！