小编典典

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

reactjs

说我有一个功能组件:

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

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

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

与将其称为组件相比:

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

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


阅读 728

收藏
2020-07-22

共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

2020-07-22