Необходимы ли параметры для внутренних функций для доступа к реквизитам + переменным функциональных компонентов React

Question

У меня есть функциональный компонент, внутри которого есть несколько функций. В приведенном ниже примере внутренние функции - function1 и function2. Я пытаюсь выяснить, нужно ли мне явно передавать реквизиты функционального компонента (prop1, prop2), а также другие объявленные переменные внутри функционального компонента (variable1, variable2) в эти внутренние функции. Вот пример:

import React from 'react'
import * as d3 from 'd3';

function MyFunction({prop1, prop2}) {
    const variable1 = '#333333';
    const variable2 = 'Jimmy';

    const function1 = () => {
        d3.select('g.g1')
            .append('rect')
            .attr('color', variable1)
    }

    const function2 = () => {
        d3.select('g.g2')
            .append('text')
            .text(prop1.label)
    }

    return (
        <svg>
            <g className='g1' />
            <g className='g2' />
        </svg>
    );
}

export default MyFunction;

Кажется, мой код упростится, если мне не нужно явно объявлять параметры для function1 и function2, чтобы иметь возможность использовать эти реквизиты + другие переменные, объявленные в верхней области, однако я не уверен, что это плохая практика или это вызовет другие проблемы с моим кодом. Это нормально? Мы будем очень благодарны за любые мысли или предложения по этому поводу!

Изменить: Хотел бы отметить, что это действительно, похоже, работает без каких-либо проблем. Мой вопрос больше в том, должен ли я это делать / все ли в порядке / есть ли проблемы, с которыми я могу столкнуться в будущем при этом?

Answer 1

Использование функции в функции - это нормально. Есть всевозможные статьи, которые вы можете прочитать, если вам следует использовать useCallback. Я расскажу об этом через секунду.

Нет, вам не нужно передавать реквизиты каждой функции. Причина этого - закрытие и то, что он фиксирует. Здесь - некоторые сведения об этом под закрытием. Ваша стрелочная функция закрывает переменную props, если они ссылаются на нее. Так что нет, вам не нужно передавать его, и проверьте эту ссылку. И Глава 2, если вы действительно хотите покопаться в глубине.

Что касается производительности, то обычно нормально! Однако каждый раз при рендеринге вашего компонента function1 и function2 будут переопределяться. Они будут той же точной функцией (если d3 не изменится), но с другой ссылкой, поэтому старый function1! == новый function1, даже если они делают то же самое. Вот почему это имеет значение ...

Хотя для немного больших накладных расходов (для каждого рендеринга компонента, возможно, с сохранением многих рендеров других компонентов или useEffect выполнений), вы можете провести анализ реакции, если он должен переопределить function1 или function2, в противном случае сохраняется та же ссылка. Это то, что делает useCallback. Честно говоря, я использую useCallback, если не уверен, что эта функция вызовет у меня проблемы. Примером может служить дочерний компонент function1, переданный в качестве опоры. Эта опора ВСЕГДА будет оцениваться как новое значение при каждом рендеринге родительского элемента, потому что это новая ссылка, если вы не используете useCallback.

Answer 2

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

Но, как вы сами обнаружили, это не требуется для рабочего компонента. Документы по реакции показывают это на всех своих примерах. Например, посетите эту ссылку .

Answer 3

Прежде всего, этот подход, когда функция находится внутри функции, не рекомендуется, он очень часто оказывается дорогостоящим, и да, если вам нужно использовать, вам нужно передать им реквизиты. Также см. Ссылку здесь