React - метод render () - разница между вызовом {renderG

Question

У меня проблемы с поиском различий между добавлением чего-либо в методе рендеринга в качестве компонента ...

/// components/profilePic.js

export const ProfilePic = () => {
 return (
   <Image src={props.src} />
 )
 
 
 
/// App.js

import { ProfilePic } from './components'

render() {
 return (
   <View>
     // This line here  vvv
     <ProfilePic src={"user/profilepic"} />
   </View>
 )
}

против. используя функцию , которая возвращает JSX :

/// components/profilePic.js

export const profilePic = (src) => {
 return (
   <Image src={src} />
 )
 
 
 
/// App.js

import { profilePic } from './components'

render() {
 return (
   <View>
     // This line here  vvv
     {profilePic("user/profilepic")}
   </View>
 )
}

Любая помощь будет высоко ценится - ура!

Answer 1

Оба способа хороши и должны давать один и тот же результат. Для этого конкретного варианта использования рекомендуется использовать первый подход для поддержания стандарта JSX и повышения читабельности.

Один из вариантов использования, который я могу придумать для второго метода, - это когда вам нужно отобразить массив элементов для пример:

render() {
  return (
    <div>
      {this.props.images.map((image) => <Image src={image} /> )}
    </div>
  )
}

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

const getImage = (imageSrc) => <Image src={imageSrc} />;

render() {
  return (
    <div>
      {this.props.images.map(getImage)}
    </div>
  )
}

Answer 2

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

Только вызывать хуки из функций React Не вызывать хуки из обычных JavaScript функции . Вместо этого вы можете:

✅ Вызывать хуки из компонентов функции React.

✅ Вызывать хуки из пользовательских хуков (мы узнаем о них на следующей странице). Следуя этому правилу, вы гарантируете, что все логические элементы c с сохранением состояния четко видны из его исходного кода.

Answer 3

Существует небольшая разница между функциональным компонентом и компонентом, который возвращает JSX

Функциональный компонент может использовать другие API, связанные с реакцией, такие как React.memo, React.forwardRef, а также you can define hooks в пределах функциональный компонент

Принимая во внимание, что функция не обладает такой большой гибкостью

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