Javascript 如何考虑在类组件和类外定义函数组件？

考虑到在React中定义功能组件的以下三个位置-

类内部（渲染方法外部）

类内部（渲染方法内部）

课外

在下面的示例代码中，

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;

import React，{Component}来自'React'；
常量FuncComponent1=（道具）=>{
返回(
{props.name}

)
}
类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“JavaScript”
}
}
FuncComponent2=（文本）=>{
返回(
{text}，{this.state.name}

)
}
render（）{
常量FuncComponent3=（道具）=>{
返回(
{props.text}，{this.state.name}

)
}
返回(
)
}
}
导出默认测试组件；

必须避免在渲染内部使用功能组件，因为它们将在每次渲染时重新创建

至于使用在类组件内部返回JSX而在渲染外部返回JSX的

函数，当您想利用类的状态或属性来渲染JSX内容，但这是特定于特定类的内容时，可以这样做

当同一个组件可以在多个位置使用时，React组件之外的
功能组件是最有利的，因此向它传递道具并渲染它是有意义的。
为什么不像常规组件那样使用功能组件？考虑使用JSX，而不是函数调用。@用JSX组件更新的EngRetryXbox，但我不能在ReDeLe（）中创建<代码>功能组件2>代码>。也没有必要在大括号中缠绕字符串支柱。得到它。因此，类外是最好的选择，除非我希望功能组件不被重用，而只是专门用于该组件。