javascript - react 功能组件 : calling as function vs. 作为组件

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

将其作为函数调用要快得多，事实上几个月前就有一次讨论。此时功能性 react 组件不能是PureComponents所以没有真正对它们应用额外的优化。

基本上，如果您可以将功能组件作为消除整个 React 生命周期的函数来调用。如果你仔细想想，你可能现在就在你的渲染方法中使用这种技术。考虑一下:

... 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 方法返回一些 react 组件，可能是功能组件，但在这种情况下只是一些组件类方法。

详见本文:https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

另请查看正在执行此操作的 babel 插件:https://babeljs.io/docs/plugins/transform-react-inline-elements