Где внутри компонента React / React Native я должен разместить функцию? Я вижу три варианта

Question

Я включил изображение ниже, чтобы вы могли понять, о чем я говорю.

Для компонента React я могу создать класс и иметь функции, которые отображают контент, возвращаемый этими функции. Я вижу три раздела компонента, в которые я могу поместить функции (см. Красные рамки на изображении). Я запутался, если имеет значение, где размещена реальная функция. Все эти три функции выполняют одну и ту же функцию, но все же находятся в разных местах.
Может кто-нибудь сказать мне, если это имеет значение, или это просто предпочтение разработчика. Спасибо. C

Изображение ниже.

Answer 1

За пределами компонента:

Это подходит для функций, которым не нужно this ключевое слово компонента и только получить аргументы, выполнить некоторый код и вернуть что-то (если вы хотеть). Если вам не нужен доступ к this, это наиболее удобное место для написания функций.

Внутри компонента:

Есть подходящие для функций, которые нужно this ключевое слово. например, если вам нужен доступ к состояниям компонентов (this.state, this.setState(), ...) и реквизитам (this.props, ...), вот подходящее место.

Внутри Метод render () компонента:

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