重新声明reactjs功能组件的功能/对象性能问题

问题描述

在过程中，我使用如下类的组件：

class Car extends React.Component {

    testing = () => {
        console.log(this.props.brand);
    }

    render() {
        testing();
        return <h2>I am a {this.props.brand}!</h2>;
    }
}

现在，我需要将它们转换为如下所示的功能组件：

function Car(props) {

    const testing = () => {
        console.log(this.props.brand);
    }
     
    testing();

    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

从功能组件的方式可以看到，testing方法在每个渲染周期内重复创建，而类组件的方法则在渲染函数之外声明。

我试图像这样将其移至外部：

const testing = () => {
    console.log(this.props.brand);
}

function Car(props) {

    testing();

    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

这不起作用，因为我需要props值。我知道我可以在方法参数中传递props，但是我有很多要转换的方法，我不想更改方法签名。

我指的是这个doc，它说：

由于在render中创建函数，钩子变慢了吗？不，在现代浏览器，与类相比，闭包的原始性能没有除了极端情况外，差异很大。

这听起来没有回答这个问题，它比较了创建闭包和类的性能，而我并不是这种情况。就我而言，它更多地是指在功能组件中重复创建相同的方法，而不是在类组件中重复创建。

谁能建议，如果我购买功能组件，会不会引起性能问题？

解决方法

在现代计算机上，在块中创建函数的开销基本上没有。就像您阅读的文档说的那样，在极端情况下，可能会（虽然不太可能）出现问题（例如，可能不存在），例如，如果有1000个此类组件并且它们每秒被更新多次-而不是创建每个渲染器的功能可能会使应用程序更快一点。但是这种情况不太可能。

更好地争取代码的清晰度和可读性。如果您发现某个特定组件的运行速度太慢，并且已经进行了性能测试以识别其中的瓶颈，请继续尝试并根据需要对其进行优化-但是在那之前可能不值得。

您实际引用的文档正在解决您的确切问题。答案是否定的，与带有方法的类组件相比，您不必担心带有封闭函数的功能组件的性能。

尝试使用useEffect挂钩。


import { useEffect } from 'react';

function Car(props) {

    const testing = () => {
        console.log(this.props.brand);
    }
     
    useEffect(()=>{
      testing();
    },[])
     
    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

javascript react-functional-component reactjs reactjs