说我有一个功能组件:
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