React Functional组件：作为函数调用与作为组件调用

Question

说我有一个功能组件：

const Foo = (props) => ( <div>{props.name}</div> );

直接将其作为函数调用有什么区别：

const fooParent = () => (
    <div> {Foo({ name: "foo" })} </div>
)

与将其称为组件相比：

const fooParent = () => (
    <div> <Foo name="foo"/> </div>
)

我对性能影响最感兴趣，React如何在内部对它们进行区别对待，也许对React Fiber中的情况可能有所不同，我听说功能组件的性能得到了提升。

Answer 1

调用它作为函数要快得多，事实上，几个月前就已经有讨论了。在这一点上，功能性反应组件不能是PureComponents，因此没有真正适用于它们的额外优化。

基本上，您可以将功能组件称为消除整个反应生命周期的功能。如果考虑一下，您可能甚至在现在的render方法中也使用了此技术。考虑一下：

... some component ...

render() {

  const tabHeaders =<TabHeaders>{this.props.tabs.map(this.renderTabHeader)}</TabHeader>;
  const tabContents = <TabContents>{this.props.tabs.map(this.renderTabContent)}</TabContents>;

  return (<div>
    {this.props.tabsBelow?[tabContents, tabHeaders] : [tabHeaders, tabContents]}
  </div>);
}

renderTabHeader方法返回一些反应组件，并且本来可以是功能组件，但在这种情况下只是一些组件类方法。

请参阅此文章以获取详细说明：https : //medium.com/missive-app/45-faster-
react-functional-components-now-3509a668e69f

还请检查执行此操作的babel插件：https : //babeljs.io/docs/plugins/transform-react-inline-
elements