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

Question

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

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

方法一：

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

方法2：

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

Answer 1

(注意：OP 现在已经改变了问题，它曾经在方法 1 中return {this.getComponent()}。

方法 1 中的render不正确(嗯，是在编辑之前(，它应该是：

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>
);
}

。尽管我想我可能会在这一点上争辩说，如果没有一个好的反驳，页眉、正文和页脚可能应该是组件(也许是函数组件(。但是像这样偶尔的帮助程序函数调用很好。

这会影响组件生命周期吗？

不。这只是render中的一个函数调用。

Answer 2

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

Answer 3

我找到了Kent C. Dodds的这篇很棒的文章。文章摘录如下：

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

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

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