说我有一个功能组件：
const Foo = (props) => ( <div>{props.name}</div> );
直接将其作为函数调用有什么区别：
const fooParent = () => (
<div> {Foo({ name: "foo" })} </div>
)
与将其称为组件相比：
const fooParent = () => (
<div> <Foo name="foo"/> </div>
)
我对性能影响最感兴趣，React如何在内部对它们进行区别对待，也许对React Fiber中的情况可能有所不同，我听说功能组件的性能得到了提升。
调用它作为函数要快得多，事实上，几个月前就已经有讨论了。在这一点上，功能性反应组件不能是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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句