Question

考虑以下三个在React中定义功能组件的地方-

在类内部（在render方法之外）
在类内部（在render方法内部）
在课堂之外

在下面的示例代码中，在三个不同的位置定义了funcComponent1，funcComponent2和funcComponent3。我该如何考虑何时在这三个地方中的任何一个地方定义功能组件？

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`，可以在要利用类的状态或props来呈现JSX内容时执行此操作，但是该行为非常特定于特定的班级

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

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

1 个答案: