Question

使用React时，呈现组件有什么区别（以及何时应应用每种方法）？

这是否以任何方式影响组件的生命周期？还是影响挂钩在组件中的运行方式？

方法1：

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

方法2：

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

Answer 1

两者之间没有真正的区别。我个人将尽可能地只使用一种render()方法，然后当该方法太大时，将其一部分提取到自己的方法中。

Answer 2

（注意：OP现在更改了问题，方法1中曾经使用return {this.getComponent()}。）

方法1中的

render是错误的（嗯，那是在编辑之前），应该是：

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

您需要在JSX上下文中使用{}，但您不在那里的JSX上下文中。例如，如果您想包装this.getComponent中返回的div，则可以使用JSX表达式在定义{{1}的JSX中定义div的子级。 }：

div

整理好render() { return <div>{this.getComponent()}</div> }后，是否使用方法1或方法2取决于您。如果您想将渲染的大部分内容移入自己的功能中，那很好。例如：

{}

...尽管尽管我认为我当时可能会争辩说，没有很好的反论点，但是页眉，正文和页脚可能应该是组件（也许是功能组件）。但是偶尔这样的辅助函数调用就可以了。

这是否会影响组件的生命周期？

不。这只是render() { return ( <div> {this.getHeader()} {this.getBody()} {this.getFooter()} </div> ); }中的函数调用。

Answer 3

我发现Kent C. Dodds非常出色的article。文章摘录为：

React不知道我们在JSX中调用函数和对其进行内联之间的区别。因此，它无法将任何内容与Counter函数相关联，因为它没有像组件一样呈现。

这就是为什么在渲染组件时需要使用JSX（或React.createElement），而不是简单地调用函数的原因。这样，可以将所有使用的钩子注册到React创建的组件的实例中。

记住这一点，听起来在渲染使用钩子的组件时最好使用JSX。

使用功能渲染JSX中的组件

3 个答案: