javascript - 在 JSX 中渲染组件与通过函数

Question

使用 React 时，渲染组件时有什么区别(以及何时应应用每种方法)？

这会以任何方式影响组件的生命周期吗？或者影响钩子(Hook)在组件中的运行方式？

方法一:

class App extends React.Component {
  ...
  function getComponent() {
    return <Component />
  }
  render() {
   return this.getComponent()
  }
}

方法二:

class App extends React.Component {
  ...
  render() {
   return <Component />
  }
}

Answer 1

( 注意: OP 现在已经改变了问题，它曾经在方法 1 中有 return {this.getComponent()}。)
render在方法 1 中是不正确的(嗯，它是在编辑之前)，它应该是:

render() {
  return this.getComponent() // No {} wrapper
}

您需要 {}在 JSX 上下文中，但您不在 JSX 上下文中。例如，如果你想包装 this.getComponent在 div 中返回，您将使用 JSX 表达式来定义 div在 JSX 中定义 div 的子级:

render() {
  return <div>{this.getComponent()}</div>
}

与 {}整理出来，使用方法1还是方法2取决于你。如果您想要将渲染的大部分内容移入它们自己的函数中，那很好。例如:

render() {
    return (
        <div>
            {this.getHeader()}
            {this.getBody()}
            {this.getFooter()}
        </div>
    );
}

...虽然我认为我可能会在这一点上争辩说，如果没有好的反论点，页眉、正文和页脚可能应该是组件(也许是函数组件)。但是像这样的偶尔的辅助函数调用很好。

Does this impact the component lifecycle in anyway?

不，这只是 render 中的函数调用。 .