Блог

На этом этапе я использую компоненты класса, как показано ниже:

 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 в аргументе метода, но у меня есть много методов для преобразования, я не хочу изменять подписи методов.

Я ссылаюсь на этот документ, в нем говорится:

Являются ли перехваты медленными из-за создания функций в рендеринге? Нет. В современных браузерах исходная производительность замыканий по сравнению с классами существенно не отличается, за исключением экстремальных сценариев.

Это не звучит как ответ на вопрос, он сравнивает производительность создания закрытия и класса, что не тот случай, о котором я говорю. В моем случае это больше относится к повторяющемуся созданию одного и того же метода в функциональных компонентах, но не в компонентах класса.

Кто-нибудь может посоветовать, вызовет ли это какие-либо проблемы с производительностью, если я перейду на функциональные компоненты?

На современных компьютерах накладные расходы на создание функции в блоке практически равны нулю. Как говорится в документах, которые вы читаете, в экстремальных сценариях это может быть проблемой (хотя и маловероятно), например, если таких компонентов 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>
    );
}