javascript - 类组件与功能组件渲染内的箭头函数？表现明智

Question

如果在 react 类组件中声明箭头函数对性能不利，
为什么在功能组件中声明变量(箭头函数)具有更好的性能？

React 现在正在朝着仅使用功能组件的方式使用整个应用程序的方式，对于具有长组件树的大型应用程序是否会出现性能问题，并且每次更新都会重新声明大量变量？ (我知道有些是垃圾收集但声明仍然发生，就像在类组件的渲染函数中使用箭头函数一样)

class ReactComponent extends React.Component {
    render() {
        return (
            <div onClick={() => console.log('do something')}>
                <SomeOtherComponent onChange={() => console.log('pass function')} />
            </div>
        );
    }
}

const functionalComponent = () => {
    const doSomething = () => console.log('do something');
    const passFunction = () => console.log('pass function');
    return (
        <div onClick={doSomething}>
            <SomeOtherComponent onChange={passFunction} />
        </div>
    );
};

Answer 1

没有什么“对性能不利”，只有不必要的计算。如果需要创建一个函数来表达程序的行为，那么没有什么是“坏的”。如果可以避免创建函数，那只是“不好”，如果可以避免大量计算，那就更糟了。

创建一个函数很便宜。它创建了一个新的函数对象，其中包含对函数代码及其环境(“闭包”)的引用，因此函数表达式与对象字面量没有太大区别。因此，创建函数并不“坏”，而且从来都不是。

React 中函数表达式产生的真正问题不是函数表达式本身，而是它的逻辑结果:

<div onClick={() => doStuff()}> Test </div>

每次重新渲染时，都会创建一个新的函数对象，它引用不同的环境，可能包含不同的 doStuff方法，这可能会做一些不同的事情。因此，在每次重新渲染时，React 都必须分离监听器，并附加一个引用新函数的新监听器，以便触发新行为。对于一个听众来说，这很便宜，但是如果你将函数传递给其他组件，将函数传递给其他组件，成本就会成倍增加(= 更多组件必须重新渲染)，所以它可能会变得昂贵(= 我们可能会担心的事情) .如果函数改变了，但它没有改变，重新连接监听器是不必要的，因此可以通过确保函数只在它们依赖的值被重新创建时才被重新创建来避免:

 const callback = useCallback(() => doStuff(), [doStuff]); // returns the same function, unless doStuff changes

 <div onClick={callback}> Test </div> <- only gets reattached when doStuff changes