在 React 中，如何考虑在 class 组件内部和 class 组件外部定义功能组件？

Question

考虑在React中定义函数式组件的以下三个地方 -

在 class 内部（在 render 方法之外）
在 class 内部（在 render 方法内部）
外class

在下面的示例代码中，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 但考虑外部 render` 而言，当您想使用 class 的状态或道具来渲染 JSX 内容时，您可以这样做，但是对特定 class

非常具体的内容

当同一个组件可以在多个地方使用时，functional component outside of React component 是最有利的，因此将道具传递给它并渲染它是有意义的。

在 React 中，如何考虑在 class 组件内部和 class 组件外部定义功能组件？

How to consider defining a functional component inside a class component and outside the class in React?

javascript

reactjs

react-component