reactjs 功能组件 function/object 重新声明（性能问题）

Question

在传球中我使用 class 组件如下：

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 方法在每个渲染周期中重复创建，而 class 组件方式，它在渲染函数之外声明。

我试过这样把它移到外面：

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

function Car(props) {

    testing();

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

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

我指的是这个doc，它说：

Are Hooks slow because of creating functions in render? No. In modern browsers, the raw performance of closures compared to classes doesn’t differ significantly except in extreme scenarios.

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

任何人都可以建议，如果我选择功能组件，这会导致任何性能问题吗？

Answer 1

在现代计算机上，在块中创建函数的开销基本为零。就像您阅读的文档所说，在极端情况下，它可能是一个问题（尽管不太可能），例如如果有 1000 个这样的组件并且它们每秒更新多次 -不是 re-creating 每个渲染的功能可能会使应用程序更快一点。但这种情况的可能性很小。

最好争取代码的清晰度和可读性。如果您发现某个特定组件运行运行速度太慢，并且您已经运行进行性能测试以确定其中的瓶颈，请继续提前尝试优化它 - 但在那之前可能不值得。

Answer 2

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

Answer 3

尝试使用 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>
    );
}

reactjs 功能组件 function/object 重新声明（性能问题）

reactjs functional component function/object re-declared (performance concern)

javascript

reactjs

react-functional-component