Как рассмотреть определение функционального компонента внутри компонента класса и вне класса в React?

Question

Учитывая следующие три места определения функционального компонента в React -

1. Внутри класса (вне метода рендеринга)
2. Внутри класса (внутри метода рендеринга)
3. За пределами класса

В приведенном ниже примере кода funcComponent1, funcComponent2 и funcComponent3 определены в трех разных местах.Как я считаю, когда определить функциональный компонент в любом из этих 3 мест?

import React, { Component } from 'react';


const FuncComponent1 = (props) => {
  return (
    <p>{props.name}</p>
  )
}

class TestComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: "JavaScript"
    }
  }


  FuncComponent2 = (text) => {
    return (
      <p>{text}, {this.state.name}</p>
    )
  }


  render(){

    const FuncComponent3 = (props) => {
      return (
        <p>{props.text}, {this.state.name}</p>
      )
    }

    return (
      <div>
        <FuncComponent1 name={'Abrar'} text={'Hello World'}/>
        <FuncComponent3 text={"HEllo World"}/>
      </div>
    )
  }

}

export default TestComponent;

Answer 1

Вы должны избегать использования functional component inside of render, так как они будут воссозданы при каждом рендеринге.

Что касается использования functions that return JSX inside Class component, но рассматривается внешняя визуализация`, вы можете сделать это, когда хотите использоватьсостояние или реквизиты класса для отображения содержимого JSX, но то, что очень специфично для конкретного класса

A functional component outside of React component, наиболее выгодно, когда один и тот же компонент может использоваться в нескольких местах и, следовательно, он делаетсмысл передавать реквизит и рендеринг.